await/async 是 ES7 最主要特征之一，它是现在为止 JS 最好的异步处理方案了。虽然没有在 ES2016 中录入，但很快就到来，现在已在 ES-Next Stage 4 阶段。

直接上例子，比方我们需要按递次猎取：产物数据=>用户数据=>批评数据

老朋侪 Ajax

传统的写法，无需诠释

// 猎取产物数据
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));
        });
    });
});

不算新的朋侪 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('products.json').then((products) => {
    console.log('Promises/products >>>', products);
    // 猎取用户数据
    return requestP('users.json');
}).then((users) => {
    console.log('Promises/users >>>', users);
    // 猎取批评数据
    return requestP('comments.json');
}).then((comments) => {
    console.log('Promises/comments >>>', comments);
});

强劲的新朋侪 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('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);
}());

与 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);
    }
}());

再次连系 Fetch

(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);
}());

运用 await/async 用同步的头脑去处理异步的代码，觉得异常酷异常爽！

参考文献[原文]：https://github.com/jaydson/es…