Skip to content

Commit 58de45e

Browse files
committed
Update JavaScript-Quick-Reference.md
1 parent cdeea0b commit 58de45e

File tree

1 file changed

+21
-19
lines changed

1 file changed

+21
-19
lines changed

JavaScript-Quick-Reference.md

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1001,7 +1001,7 @@ async/await is a set of JavaScript keywords that simplifies the process of worki
10011001
- **Error Handling**: It simplifies error handling with try...catch blocks, improving code reliability.
10021002
- **Sequencing**: async/await allows you to sequence asynchronous tasks in a natural order, enhancing code flow.
10031003

1004-
### Async Function Using asnyc/await to Fetch Data From a Server
1004+
### Using asnyc/await to Fetch Data From a Server
10051005

10061006
```javascript
10071007
async function fetchData() {
@@ -1066,12 +1066,13 @@ For educational purposes, this is an example that doesn't use an asynchronous te
10661066
// Initialize variables to store elements on the web page
10671067
const dataContainer = document.getElementById('dataContainer');
10681068
const errorMessage = document.getElementById('errorMessage');
1069+
const userInput = document.getElementById('userInput');
10691070

10701071
// Define the API URL
10711072
const apiUrl = `https://api.example.com/data?search=${userInput}`;
10721073

10731074
// Display user input on the web page
1074-
userSearchValue.textContent = `User Input: ${userInput}`;
1075+
userInput.textContent = `User Input: ${userInput}`;
10751076

10761077
// Make an HTTP request using the Fetch API with error handling
10771078
fetch(apiUrl)
@@ -1082,28 +1083,30 @@ fetch(apiUrl)
10821083
return response.json();
10831084
})
10841085
.then(data => {
1085-
// Update the web page content with the fetched data
1086+
// Display fetched data on the web page
10861087
dataContainer.textContent = `Data for ${userInput}: ${data.value}`;
10871088
})
10881089
.catch(error => {
10891090
// Display an error message on the web page
10901091
errorMessage.textContent = `Error: ${error.message}`;
10911092
});
1093+
10921094
```
10931095

10941096
### Fetch API (**With** API Key)
10951097
For educational purposes, this is an example that doesn't use an asynchronous technique.
10961098

10971099
```javascript
10981100
// Initialize variables to store elements on the web page
1101+
const userInput = document.getElementById('userInput');
10991102
const dataContainer = document.getElementById('dataContainer');
11001103
const errorMessage = document.getElementById('errorMessage');
11011104

11021105
// Define the API URL
11031106
const apiUrl = `https://api.example.com/data?api_key=${apiKey}&search=${userInput}`;
11041107

11051108
// Display user input on the web page
1106-
dataContainer.textContent = `User Input: ${userInput}`;
1109+
userInput.textContent = `User Input: ${userInput}`;
11071110

11081111
// Make an HTTP request using the Fetch API with error handling
11091112
fetch(apiUrl)
@@ -1122,42 +1125,40 @@ fetch(apiUrl)
11221125
errorMessage.textContent = `Error: ${error.message}`;
11231126
});
11241127

1125-
11261128
```
11271129

11281130
### Fetch API using Async/Await (**Without** API Key)
11291131

11301132
```javascript
1133+
// Initialize variables to store elements on the web page
1134+
const userInput = document.getElementById('userInput');
1135+
const dataContainer = document.getElementById('dataContainer');
1136+
const errorMessage = document.getElementById('errorMessage');
1137+
11311138
// Define an asynchronous function to fetch and handle API data
11321139
async function fetchData() {
1133-
// Initialize variables to store elements on the web page
1134-
const dataContainer = document.getElementById('dataContainer');
1135-
const errorMessage = document.getElementById('errorMessage');
1136-
1137-
try {
1140+
try {
11381141
// Make an HTTP request using the Fetch API
11391142
const response = await fetch(`https://api.example.com/data?search=${userInput}`);
1140-
11411143
// Check if the response is successful
11421144
if (!response.ok) {
11431145
throw new Error(`HTTP error! Status: ${response.status}`);
11441146
}
1145-
11461147
// Parse the JSON response
11471148
const data = await response.json();
1148-
1149-
// Display user input and fetched data on the web page
1150-
dataContainer.textContent = `User Input: ${userInput.value}, Data: ${data.value}`;
1151-
1149+
// Display user input on the web page
1150+
userInput.textContent = `User Input: ${userInput.value}`;
1151+
// Display fetched data on the web page
1152+
dataContainer.textContent = `Data: ${data.value}`;
11521153
} catch (error) {
11531154
// Display an error message on the web page
1154-
const errorMessage = document.getElementById('errorMessage');
11551155
errorMessage.textContent = `Error: ${error.message}`;
11561156
}
11571157
}
11581158

11591159
fetchData();
11601160

1161+
11611162
```
11621163

11631164
### Fetch API using Async/Await (**With** API Key)
@@ -1166,8 +1167,10 @@ fetchData();
11661167
// Define an asynchronous function to fetch and handle API data
11671168
async function fetchData() {
11681169
// Initialize variables to store elements on the web page
1170+
const userInput = document.getElementById("userInput");
11691171
const dataContainer = document.getElementById('dataContainer');
11701172
const errorMessage = document.getElementById('errorMessage');
1173+
11711174
try {
11721175
// Make an HTTP request using the Fetch API
11731176
const response = await fetch(`https://api.example.com/data?api_key=${apiKey}&search=${userInput}`);
@@ -1180,11 +1183,10 @@ async function fetchData() {
11801183
const data = await response.json();
11811184

11821185
// Display user input and fetched data on the web page
1183-
userInformation.textContent = `User Input: ${userInput.value}, Data: ${data.value}`;
1186+
userInput.textContent = `User Input: ${userInput.value}, Data: ${data.value}`;
11841187

11851188
} catch (error) {
11861189
// Display an error message on the web page
1187-
const errorMessage = document.getElementById('errorMessage');
11881190
errorMessage.textContent = `Error: ${error.message}`;
11891191
}
11901192
}

0 commit comments

Comments
 (0)