"Out Of Sync" is a single-page application web into open APIs. The interface is clean and straightforward, sporting a sidebar sidebar with links to four dynamic pages. Each page provides simple experiment with API task basesd.
- JavaScript
- npm
- JSON, Rijksmuseum API
- A Single-page application structure. (SPA)
- Dynamic rendering of four distinct pages, each with its own API interaction
- Error-handling, Data-fetching, API's-interactions.
To get started, you'll need to install some packages. Run the following command:
```bash npm install ```
Navigate through the sidebar to access fouf different pages. Each page stands for different APIs interaction. providing a practical way to get hands-on experience with simple API tasks.
- Teachings and educational resources: HackYourFuture
- open AI
License information is not yet available.
Callbacks are functions passed as arguments to other functions. They are executed at a later time. However, using too many callbacks can lead to "Callback Hell" or "Pyramid of Doom," making the code hard to read and manage.
function fetchData(callback) {
// Simulating async operation
setTimeout(() => {
callback('Data fetched');
}, 1000);
}
fetchData((result) => {
console.log(result); // Outputs "Data fetched"
});
Promises represent the eventual completion or failure of an asynchronous operation. They make the code more readable and manageable.
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Data fetched');
}, 1000);
});
}
fetchData().then((result) => {
console.log(result); // Outputs "Data fetched"
});You can chain .then() methods to perform multiple asynchronous operations sequentially.
fetchData()
.then((result) => {
console.log(result);
return 'New data';
})
.then((newResult) => {
console.log(newResult); // Outputs "New data"
});The .finally() method is executed when the Promise is settled, regardless of whether it was resolved or rejected. It's usually used for cleanup actions.
fetchData()
.then((result) => {
console.log(result);
})
.catch((error) => {
console.log(error);
})
.finally(() => {
console.log('Done');
});
The Event Loop allows JavaScript to perform non-blocking operations even though it's single-threaded. It works as follows:
- Run the initial script (synchronous code).
- Execute asynchronous tasks, placing their callbacks in a message queue.
- Once the main thread is free, the event loop moves the first message from the queue to be executed.
- This continues as long as there are messages in the queue or tasks to process.
Callback Hell occurs when multiple callbacks are nested, leading to code that is hard to read and maintain.
doSomething((result1) => {
doSomethingElse(result1, (result2) => {
anotherFunction(result2, (result3) => {
yetAnotherFunction(result3, (result4) => {
// so on...
});
});
});
});- Modularization: Break out nested callbacks into named functions.
- Promises: Use Promises to simplify asynchronous operations.
- Async/Await: Makes asynchronous code look and behave like synchronous code.
Break out nested callbacks into separate named functions to improve readability.
function handleResult4(result4) {
console.log('Result 4:', result4);
}
function handleResult3(result3) {
yetAnotherFunction(result3, handleResult4);
}
function handleResult2(result2) {
anotherFunction(result2, handleResult3);
}
function handleResult1(result1) {
doSomethingElse(result1, handleResult2);
}
doSomething(handleResult1);Use Promises to make the code more manageable and easier to read.
doSomething()
.then(result1 => doSomethingElse(result1))
.then(result2 => anotherFunction(result2))
.then(result3 => yetAnotherFunction(result3))
.catch(error => console.log('An error occurred:', error));Use async/await to make the code look and behave like synchronous code, making it even easier to read.
async function main() {
try {
const result1 = await doSomething();
const result2 = await doSomethingElse(result1);
const result3 = await anotherFunction(result2);
const result4 = await yetAnotherFunction(result3);
console.log('Result 4:', result4);
} catch (error) {
console.log('An error occurred:', error);
}
}
main();This syntactic sugar makes working with Promises more straightforward. An async function implicitly returns a Promise. Inside an async function, you can use await to pause the execution until a Promise is resolved or rejected.
rewriting the fetchData example:
async function fetchData() {
return new Promise((resolve) => {
setTimeout(() => {
resolve('Data fetched');
}, 1000);
});
}
async function main() {
try {
const result = await fetchData();
console.log(result); // Outputs "Data fetched"
} catch (error) {
console.log('An error occurred:', error);
}
}
main();In this example, main is an async function. Inside it, we await the resolution of fetchData. If it resolves, the result is stored in the variable result. If it rejects, the code in the catch block runs.
Can also use .finally() with async/await to perform some cleanup actions, similar to how you would with Promises:
async function main() {
try {
const result = await fetchData();
console.log(result); // Outputs "Data fetched"
} catch (error) {
console.log('An error occurred:', error);
} finally {
console.log('Done');
}
}
async function fetchData() {
//jsonplaceholder.typicode.com is just a free online REST API for testing.
//This API doesn’t require an API key for access; it’s open for public use.
const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
const data = await response.json();
console.log(data);
}
fetchData();async function fetchDataWithApiKey() {
const response = await fetch('https://...', {
headers: {
// Bearer: is one of authentication's types.
'Authorization': `Bearer ${ApiKey}`
}
});
const data = await response.json();
console.log(data);
}
fetchDataWithApiKey();async function fetchDataWithErrorHandling() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
console.log(data);
} catch (error) {
console.log('Fetch failed:', error);
}
}
fetchDataWithErrorHandling();async function fetchDataWithApiKeyAndErrorHandling() {
try {
const response = await fetch('https://someapi.com/data', {
headers: {
'Authorization': `Bearer ${ApiKey}`
}
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
console.log(data);
} catch (error) {
console.log('Fetch failed:', error);
}
}
fetchDataWithApiKeyAndErrorHandling();! ©️ AI Generated/Colected for the most part. .