Detailed explanation of the function and usage of await/async in JavaScript

The role and usage of await/async in JavaScript

Share:

await/ async is one of the most important features of ES7. It is by far the best asynchronous solution for JS. Although it has not been included in ES2016, it will arrive soon and is currently in the ES-NextStage4 stage.

Let’s go directly to the example. For example, we need to obtain in order: Product data => User data => Comment data

Old friend Ajax

Traditional writing method, no need to explain

// 获取产品数据
ajax('products.json', (products) => {
    console.log('AJAX/products >>>', JSON.parse(products));
    // 获取用户数据
    ajax('users.json', (users) => {
        console.log('AJAX/users >>>', JSON.parse(users));
        // 获取评论数据
        ajax('products.json', (comments) => {
            console.log('AJAX/comments >>>', JSON.parse(comments));
        });
    });
});

Not a new friend Promise

Promise has been mentioned for a long time and is also part of ES6. Promise can eliminate the pyramid of doom caused by callback hell, making the code clearer.

// Promise
// 封装 Ajax，返回一个 Promise
function requestP(url) {
    return new Promise(function(resolve, reject) {
        ajax(url, (response) => {
            resolve(JSON.parse(response));
        });
    });
}
// 获取产品数据
requestP('products.json').then(function(products){
    console.log('Promises/products >>>', products);
});
// 获取用户数据
requestP('users.json').then(function(users){
    console.log('Promises/users >>>', users);
});
// 获取评论数据
requestP('comments.json').then(function(comments){
    console.log('Promises/comments >>>', comments);
});

Of course, using Promise.all can be more concise

Promise.all([
    requestP('products.json'),
    requestP('users.json'),
    requestP('comments.json')
])
.then(function(data) {
    console.log('Parallel promises >>>', data);
});

Powerful new friends Generators

Generators are also a new feature of ES6, which can pause/execute code. Yield means pausing, and iterator.next means executing the next step. It doesn’t matter if you don’t understand Generators. You can ignore it and learn await/async directly.

// Generators
function request(url) {
    ajax(url, (response) => {
        iterator.next(JSON.parse(response));
    });
}
function *main() {
    // 获取产品数据
    let data = yield request('products.json');
    // 获取用户数据
    let users = yield request('users.json');
    // 获取评论数据
    let products = yield request('comments.json');
    console.log('Generator/products >>>', products);
    console.log('Generator/users >>>', users);
    console.log('Generator/comments >>>', comments);
}
var iterator = main();
iterator.next();
碉堡的朋友 await/async
与 Promise 结合使用
// 封装 Ajax，返回一个 Promise
function requestP(url) {
    return new Promise(function(resolve, reject) {
        ajax(url, (response) => {
            resolve(JSON.parse(response));
        });
    });
}
(async () => {
    // 获取产品数据
    let data = await requestP('products.json');
     // 获取用户数据
    let users = await requestP('users.json');
     // 获取评论数据
    let products = await requestP('comments.json');
    console.log('ES7 Async/products >>>', products);
    console.log('ES7 Async/users >>>', users);
    console.log('ES7 Async/comments >>>', comments);
}());

Use in combination with Fetch API:

(async () => {
// Async/await using the fetch API
    try {
         // 获取产品数据
        let products = await fetch('products.json');
        // Parsing products
        let parsedProducts = await products.json();
        // 获取用户数据
        let users = await fetch('users.json');
        // Parsing users
        let parsedUsers = await users.json();
        // 获取评论数据
        let comments = await fetch('comments.json');
        // Parsing comments
        let parsedComments = await comments.json();
        console.log('ES7 Async+fetch/products >>>', parsedProducts);
        console.log('ES7 Async+fetch/users >>>', parsedUsers);
        console.log('ES7 Async+fetch/comments >>>', parsedComments);
    } catch (error) {
        console.log(error);
    }
}());

Execute in array order

(async () => {
    let parallelData = await* [
        requestP('products.json'),
        requestP('users.json'),
        requestP('comments.json')
    ];
    console.log('Async parallel >>>', parallelData);
}());

Combined with Fetch again

(async () => {
    let parallelDataFetch = await* [
        (await fetch('products.json')).json(),
        (await fetch('users.json')).json(),
        (await fetch('comments.json')).json()
    ];
    console.log('Async parallel+fetch >>>', parallelDataFetch);
}());

Use await/async and think synchronously Solving asynchronous code feels very cool and exciting!

Recommended tutorial: "js basic tutorial"

The above is the detailed content of Detailed explanation of the function and usage of await/async in JavaScript. For more information, please follow other related articles on the PHP Chinese website!