Skip to content

Commit 3227644

Browse files
committed
updated api section to follow best practice
1 parent daf5cfa commit 3227644

File tree

1 file changed

+28
-21
lines changed

1 file changed

+28
-21
lines changed

JavaScript-Quick-Reference.md

Lines changed: 28 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1090,87 +1090,94 @@ Using Fetch() API facilitates asynchronous data fetching, enhancing user experie
10901090
### Fetch API using Async/Await (WithoutAPI Key)
10911091

10921092
```javascript
1093-
// Initialize these elements outside if they are used elsewhere too
1093+
// DOM elements initialization
10941094
const userInput = document.getElementById("userInput");
10951095
const dataContainer = document.getElementById('dataContainer');
10961096
const errorMessage = document.getElementById('errorMessage');
10971097
const searchButton = document.getElementById('searchButton');
10981098

1099+
// Function to fetch data from API asynchronously
10991100
async function fetchData() {
11001101
try {
1101-
// Encode the user input for safe inclusion in the URL
1102+
// Encode user input for URL parameter
11021103
const encodedInput = encodeURIComponent(userInput.value);
11031104

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
11051106
const response = await fetch(`https://api.example.com/data?search=${encodedInput}`);
11061107

1108+
// Check response status
11071109
if (!response.ok) {
1110+
// Throw error for unsuccessful response
11081111
throw new Error(`HTTP error! Status: ${response.status}`);
11091112
}
11101113

1114+
// Parse response to JSON
11111115
const data = await response.json();
11121116

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}`;
11161119

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
11191123

1124+
// Update DOM with response data
11201125
dataContainer.textContent = `Value 1: ${value1}, Value 2: ${value2}`;
11211126
} catch (error) {
1127+
// Handle and display error
11221128
errorMessage.textContent = `Error: ${error.message}`;
11231129
}
11241130
}
1125-
11261131
// Attach an event listener to the search button
11271132
searchButton.addEventListener('click', fetchData);
1128-
11291133
```
11301134

11311135
### Fetch API using Async/Await (With API Key)
11321136

11331137
```javascript
1134-
// Initialize these elements outside if they are used elsewhere too
1138+
// DOM element references
11351139
const userInput = document.getElementById("userInput");
11361140
const dataContainer = document.getElementById('dataContainer');
11371141
const errorMessage = document.getElementById('errorMessage');
11381142
const searchButton = document.getElementById('searchButton');
11391143

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)
11411145
const apiKey = 'YOUR_API_KEY_HERE';
11421146

1147+
// Async function to fetch data from API
11431148
async function fetchData() {
11441149
try {
1145-
// Encode the user input for safe inclusion in the URL
1150+
// Encode user input for URL inclusion
11461151
const encodedInput = encodeURIComponent(userInput.value);
11471152

1148-
// API URL that requires an API key
1153+
// Fetch data from API with encoded input
11491154
const response = await fetch(`https://api.example.com/data?api_key=${apiKey}&search=${encodedInput}`);
11501155

1156+
// Check for successful response
11511157
if (!response.ok) {
11521158
throw new Error(`HTTP error! Status: ${response.status}`);
11531159
}
11541160

1161+
// Parse JSON response
11551162
const data = await response.json();
11561163

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}`;
11601166

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
11631170

11641171
dataContainer.textContent = `Value 1: ${value1}, Value 2: ${value2}`;
11651172
} catch (error) {
1173+
// Handle and display errors
11661174
errorMessage.textContent = `Error: ${error.message}`;
11671175
}
11681176
}
11691177

1178+
11701179
// Attach an event listener to the search button
11711180
searchButton.addEventListener('click', fetchData);
1172-
1173-
11741181
```
11751182

11761183
[🔝 Back to Top](#top)

0 commit comments

Comments
 (0)