@@ -1001,7 +1001,7 @@ async/await is a set of JavaScript keywords that simplifies the process of worki
1001
1001
- ** Error Handling** : It simplifies error handling with try...catch blocks, improving code reliability.
1002
1002
- ** Sequencing** : async/await allows you to sequence asynchronous tasks in a natural order, enhancing code flow.
1003
1003
1004
- ### Async Function Using asnyc/await to Fetch Data From a Server
1004
+ ### Using asnyc/await to Fetch Data From a Server
1005
1005
1006
1006
``` javascript
1007
1007
async function fetchData () {
@@ -1066,12 +1066,13 @@ For educational purposes, this is an example that doesn't use an asynchronous te
1066
1066
// Initialize variables to store elements on the web page
1067
1067
const dataContainer = document .getElementById (' dataContainer' );
1068
1068
const errorMessage = document .getElementById (' errorMessage' );
1069
+ const userInput = document .getElementById (' userInput' );
1069
1070
1070
1071
// Define the API URL
1071
1072
const apiUrl = ` https://api.example.com/data?search=${ userInput} ` ;
1072
1073
1073
1074
// Display user input on the web page
1074
- userSearchValue .textContent = ` User Input: ${ userInput} ` ;
1075
+ userInput .textContent = ` User Input: ${ userInput} ` ;
1075
1076
1076
1077
// Make an HTTP request using the Fetch API with error handling
1077
1078
fetch (apiUrl)
@@ -1082,28 +1083,30 @@ fetch(apiUrl)
1082
1083
return response .json ();
1083
1084
})
1084
1085
.then (data => {
1085
- // Update the web page content with the fetched data
1086
+ // Display fetched data on the web page
1086
1087
dataContainer .textContent = ` Data for ${ userInput} : ${ data .value } ` ;
1087
1088
})
1088
1089
.catch (error => {
1089
1090
// Display an error message on the web page
1090
1091
errorMessage .textContent = ` Error: ${ error .message } ` ;
1091
1092
});
1093
+
1092
1094
```
1093
1095
1094
1096
### Fetch API (** With** API Key)
1095
1097
For educational purposes, this is an example that doesn't use an asynchronous technique.
1096
1098
1097
1099
``` javascript
1098
1100
// Initialize variables to store elements on the web page
1101
+ const userInput = document .getElementById (' userInput' );
1099
1102
const dataContainer = document .getElementById (' dataContainer' );
1100
1103
const errorMessage = document .getElementById (' errorMessage' );
1101
1104
1102
1105
// Define the API URL
1103
1106
const apiUrl = ` https://api.example.com/data?api_key=${ apiKey} &search=${ userInput} ` ;
1104
1107
1105
1108
// Display user input on the web page
1106
- dataContainer .textContent = ` User Input: ${ userInput} ` ;
1109
+ userInput .textContent = ` User Input: ${ userInput} ` ;
1107
1110
1108
1111
// Make an HTTP request using the Fetch API with error handling
1109
1112
fetch (apiUrl)
@@ -1122,42 +1125,40 @@ fetch(apiUrl)
1122
1125
errorMessage .textContent = ` Error: ${ error .message } ` ;
1123
1126
});
1124
1127
1125
-
1126
1128
```
1127
1129
1128
1130
### Fetch API using Async/Await (** Without** API Key)
1129
1131
1130
1132
``` 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
+
1131
1138
// Define an asynchronous function to fetch and handle API data
1132
1139
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 {
1138
1141
// Make an HTTP request using the Fetch API
1139
1142
const response = await fetch (` https://api.example.com/data?search=${ userInput} ` );
1140
-
1141
1143
// Check if the response is successful
1142
1144
if (! response .ok ) {
1143
1145
throw new Error (` HTTP error! Status: ${ response .status } ` );
1144
1146
}
1145
-
1146
1147
// Parse the JSON response
1147
1148
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 } ` ;
1152
1153
} catch (error) {
1153
1154
// Display an error message on the web page
1154
- const errorMessage = document .getElementById (' errorMessage' );
1155
1155
errorMessage .textContent = ` Error: ${ error .message } ` ;
1156
1156
}
1157
1157
}
1158
1158
1159
1159
fetchData ();
1160
1160
1161
+
1161
1162
```
1162
1163
1163
1164
### Fetch API using Async/Await (** With** API Key)
@@ -1166,8 +1167,10 @@ fetchData();
1166
1167
// Define an asynchronous function to fetch and handle API data
1167
1168
async function fetchData () {
1168
1169
// Initialize variables to store elements on the web page
1170
+ const userInput = document .getElementById (" userInput" );
1169
1171
const dataContainer = document .getElementById (' dataContainer' );
1170
1172
const errorMessage = document .getElementById (' errorMessage' );
1173
+
1171
1174
try {
1172
1175
// Make an HTTP request using the Fetch API
1173
1176
const response = await fetch (` https://api.example.com/data?api_key=${ apiKey} &search=${ userInput} ` );
@@ -1180,11 +1183,10 @@ async function fetchData() {
1180
1183
const data = await response .json ();
1181
1184
1182
1185
// 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 } ` ;
1184
1187
1185
1188
} catch (error) {
1186
1189
// Display an error message on the web page
1187
- const errorMessage = document .getElementById (' errorMessage' );
1188
1190
errorMessage .textContent = ` Error: ${ error .message } ` ;
1189
1191
}
1190
1192
}
0 commit comments