JavaScript Promises & ES7 Async/Await Guide

2 years ago
Sophia Anderson
2 minutes

A Promise is a mechanism used to handle asynchronous operations and can be used to solve the problem of callback hell. The core idea is to encapsulate asynchronous operations into a Promise object and handle the results of the asynchronous operations through chained calls.

There are three possible states for a Promise object: pending (in progress), fulfilled (successfully completed), and rejected (failed). Once a Promise object’s state changes to fulfilled or rejected, the corresponding callback function will be invoked.

The basic usage of Promise objects is as follows:

1. Create a Promise object:

const promise = new Promise((resolve, reject) => {
    // 异步操作
    // 如果操作成功，调用resolve方法并传入结果
    // 如果操作失败，调用reject方法并传入错误信息
});

2. Handling the results of a Promise object:

promise
    .then(result => {
        // 处理成功的结果
    })
    .catch(error => {
        // 处理失败的结果
    });

3. Other asynchronous operations can be nested within a Promise object.

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('success');
    }, 1000);
});

promise
    .then(result => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(result.toUpperCase());
            }, 1000);
        });
    })
    .then(result => {
        console.log(result); // SUCCESS
    })
    .catch(error => {
        console.error(error);
    });

Introduced in ES7, the async/await keywords make it easier to work with Promises. By defining an asynchronous function with the async keyword, you can use the await keyword to wait for the result of asynchronous operations.

Basic usage of async/await:

async function getData() {
    try {
        const result1 = await asyncFunc1();
        const result2 = await asyncFunc2(result1);
        console.log(result2);
    } catch (error) {
        console.error(error);
    }
}

Both asyncFunc1 and asyncFunc2 are asynchronous functions that return Promise objects.

Using async/await can make asynchronous code look more like synchronous code, improving readability. However, it’s important to note that await can only be used within async functions.

bannerAds