@@ -1090,87 +1090,94 @@ Using Fetch() API facilitates asynchronous data fetching, enhancing user experie
1090
1090
### Fetch API using Async/Await (WithoutAPI Key)
1091
1091
1092
1092
``` javascript
1093
- // Initialize these elements outside if they are used elsewhere too
1093
+ // DOM elements initialization
1094
1094
const userInput = document .getElementById (" userInput" );
1095
1095
const dataContainer = document .getElementById (' dataContainer' );
1096
1096
const errorMessage = document .getElementById (' errorMessage' );
1097
1097
const searchButton = document .getElementById (' searchButton' );
1098
1098
1099
+ // Function to fetch data from API asynchronously
1099
1100
async function fetchData () {
1100
1101
try {
1101
- // Encode the user input for safe inclusion in the URL
1102
+ // Encode user input for URL parameter
1102
1103
const encodedInput = encodeURIComponent (userInput .value );
1103
1104
1104
- // Replace with a public API URL that doesn't require an API key
1105
+ // Fetch request to a public API without API key requirement
1105
1106
const response = await fetch (` https://api.example.com/data?search=${ encodedInput} ` );
1106
1107
1108
+ // Check response status
1107
1109
if (! response .ok ) {
1110
+ // Throw error for unsuccessful response
1108
1111
throw new Error (` HTTP error! Status: ${ response .status } ` );
1109
1112
}
1110
1113
1114
+ // Parse response to JSON
1111
1115
const data = await response .json ();
1112
1116
1113
- // Assuming 'displayInput' is another element to show the user input
1114
- const displayInput = document .getElementById (" displayInput" );
1115
- displayInput .textContent = ` User Input: ${ userInput .value } ` ;
1117
+ // Display the entered user input
1118
+ userInput .textContent = ` User Input: ${ userInput .value } ` ;
1116
1119
1117
- const value1 = data .property1 ; // Replace with actual property name
1118
- const value2 = data .property2 ; // Replace with actual property name
1120
+ // Extract values from response
1121
+ const value1 = data .property1 ; // Use actual data property names
1122
+ const value2 = data .property2 ; // Use actual data property names
1119
1123
1124
+ // Update DOM with response data
1120
1125
dataContainer .textContent = ` Value 1: ${ value1} , Value 2: ${ value2} ` ;
1121
1126
} catch (error) {
1127
+ // Handle and display error
1122
1128
errorMessage .textContent = ` Error: ${ error .message } ` ;
1123
1129
}
1124
1130
}
1125
-
1126
1131
// Attach an event listener to the search button
1127
1132
searchButton .addEventListener (' click' , fetchData);
1128
-
1129
1133
```
1130
1134
1131
1135
### Fetch API using Async/Await (With API Key)
1132
1136
1133
1137
``` javascript
1134
- // Initialize these elements outside if they are used elsewhere too
1138
+ // DOM element references
1135
1139
const userInput = document .getElementById (" userInput" );
1136
1140
const dataContainer = document .getElementById (' dataContainer' );
1137
1141
const errorMessage = document .getElementById (' errorMessage' );
1138
1142
const searchButton = document .getElementById (' searchButton' );
1139
1143
1140
- // Your API key (in a real-world scenario, this should not be exposed in client-side code )
1144
+ // API key (note: secure it properly in real-world apps )
1141
1145
const apiKey = ' YOUR_API_KEY_HERE' ;
1142
1146
1147
+ // Async function to fetch data from API
1143
1148
async function fetchData () {
1144
1149
try {
1145
- // Encode the user input for safe inclusion in the URL
1150
+ // Encode user input for URL inclusion
1146
1151
const encodedInput = encodeURIComponent (userInput .value );
1147
1152
1148
- // API URL that requires an API key
1153
+ // Fetch data from API with encoded input
1149
1154
const response = await fetch (` https://api.example.com/data?api_key=${ apiKey} &search=${ encodedInput} ` );
1150
1155
1156
+ // Check for successful response
1151
1157
if (! response .ok ) {
1152
1158
throw new Error (` HTTP error! Status: ${ response .status } ` );
1153
1159
}
1154
1160
1161
+ // Parse JSON response
1155
1162
const data = await response .json ();
1156
1163
1157
- // Assuming 'displayInput' is another element to show the user input
1158
- const displayInput = document .getElementById (" displayInput" );
1159
- displayInput .textContent = ` User Input: ${ userInput .value } ` ;
1164
+ // Display user input
1165
+ userInput .textContent = ` User Input: ${ userInput .value } ` ;
1160
1166
1161
- const value1 = data .property1 ; // Replace with actual property name
1162
- const value2 = data .property2 ; // Replace with actual property name
1167
+ // Extract and display values from response
1168
+ const value1 = data .property1 ; // Adjust property names
1169
+ const value2 = data .property2 ; // Adjust property names
1163
1170
1164
1171
dataContainer .textContent = ` Value 1: ${ value1} , Value 2: ${ value2} ` ;
1165
1172
} catch (error) {
1173
+ // Handle and display errors
1166
1174
errorMessage .textContent = ` Error: ${ error .message } ` ;
1167
1175
}
1168
1176
}
1169
1177
1178
+
1170
1179
// Attach an event listener to the search button
1171
1180
searchButton .addEventListener (' click' , fetchData);
1172
-
1173
-
1174
1181
```
1175
1182
1176
1183
[ 🔝 Back to Top] ( #top )
0 commit comments