详解JavaScript里的await/async的作用和用法

Javascript里的await/async的作用和用法

分享：

await/async是ES7最重要特性之一，它是目前为止JS最佳的异步解决方案了。虽然没有在ES2016中录入，但很快就到来，目前已经在 ES-NextStage4阶段。

直接上例子，比如我们需要按顺序获取：产品数据=>用户数据=>评论数据

老朋友 Ajax

传统的写法，无需解释

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

不算新的朋友 Promise

Promise 已经被提及已久了，也是 ES6 的一部分。Promise 能消除 callback hell 带来的厄运金字塔，相比起来代码更清晰了。

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

当然使用 Promise.all 可以更简洁

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

强劲的新朋友 Generators

Generators 也是 ES6 一个新的特性，能够 暂停/执行 代码。yield 表示暂停，iterator.next 表示执行下一步，如果你不了解 Generators 也没关系，可以忽略它直接学习 await/async。

// Generators
function request(url) {
    ajax(url, (response) => {
        iterator.next(JSON.parse(response));
    });
}
function *main() {
    // 获取产品数据
    let data = yield request(&＃39;products.json&＃39;);
    // 获取用户数据
    let users = yield request(&＃39;users.json&＃39;);
    // 获取评论数据
    let products = yield request(&＃39;comments.json&＃39;);
    console.log(&＃39;Generator/products >>>&＃39;, products);
    console.log(&＃39;Generator/users >>>&＃39;, users);
    console.log(&＃39;Generator/comments >>>&＃39;, 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(&＃39;products.json&＃39;);
     // 获取用户数据
    let users = await requestP(&＃39;users.json&＃39;);
     // 获取评论数据
    let products = await requestP(&＃39;comments.json&＃39;);
    console.log(&＃39;ES7 Async/products >>>&＃39;, products);
    console.log(&＃39;ES7 Async/users >>>&＃39;, users);
    console.log(&＃39;ES7 Async/comments >>>&＃39;, comments);
}());

与 Fetch API 结合使用：

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

按数组顺序执行

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

再次结合 Fetch

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

使用 await/async 用同步的思维去解决异步的代码，感觉非常酷非常爽！

推荐教程：《js基础教程》

以上就是详解Javascript里的await/async的作用和用法的详细内容，更多请关注 第一PHP社区 其它相关文章！