DEV Community

Cover image for Handling asynchronous operations in JavaScript
Vitalii Sevastianov
Vitalii Sevastianov

Posted on

1

Handling asynchronous operations in JavaScript

Handling asynchronous operations in JavaScript is a fundamental skill, and there are several ways to manage it, including using callbacks, promises, and the async/await syntax.

1. Callbacks
Callbacks are functions that are passed as arguments to other functions and are executed after the completion of an operation.

Example of Callbacks:

function fetchData(url, callback) {
    // Simulating an asynchronous API call
    setTimeout(() => {
        callback('Data from ' + url);
    }, 1000);
}

fetchData('https://api.example.com', function(data) {
    console.log(data); // Output after 1 second: Data from https://api.example.com
});
Enter fullscreen mode Exit fullscreen mode

In this example, fetchData simulates fetching data from a URL. Once the data fetching is simulated (after 1 second), the callback function is called with the data.

2. Promises
Promises are objects that represent the eventual completion or failure of an asynchronous operation. They can be in one of these states: pending, fulfilled, or rejected.

Example of Promises:

function fetchData(url) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Data from ' + url);
        }, 1000);
    });
}

fetchData('https://api.example.com')
    .then(data => {
        console.log(data); // Output after 1 second: Data from https://api.example.com
    })
    .catch(error => {
        console.error(error);
    });
Enter fullscreen mode Exit fullscreen mode

In this example, fetchData returns a promise that resolves with the data after 1 second. .then() is used to handle the resolved data, and .catch() is for handling any errors.

3. Async/Await
Async/Await is a syntactic feature of JavaScript that allows you to write asynchronous code in a more synchronous-looking manner. It's built on top of promises.

Example of Async/Await:

async function fetchData(url) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Data from ' + url);
        }, 1000);
    });
}

async function main() {
    try {
        const data = await fetchData('https://api.example.com');
        console.log(data); // Output after 1 second: Data from https://api.example.com
    } catch (error) {
        console.error(error);
    }
}

main();
Enter fullscreen mode Exit fullscreen mode

In this example, fetchData is an asynchronous function that returns a promise. In the main function, await is used to wait for the promise to resolve, and try...catch handles any errors.

Summary

- Callbacks are the traditional way to handle asynchronous operations but can lead to complex code structures known as "callback hell".
- Promises provide a cleaner and more manageable way to handle asynchronous operations and are widely used in modern JavaScript.
- Async/Await makes your asynchronous code look and behave a bit more like synchronous code, which can make it easier to understand and maintain.

Each method has its use cases and understanding all three is crucial for a proficient JavaScript developer.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay