摘要：是最重要特性之一，它是目前為止最佳的異步解決方案了。雖然沒有在中錄入，但很快就到來，目前已經(jīng)在階段。表示暫停，表示執(zhí)行下一步，如果你不了解也沒關(guān)系，可以忽略它直接學(xué)習(xí)。

await/async 是 ES7 最重要特性之一，它是目前為止 JS 最佳的異步解決方案了。雖然沒有在 ES2016 中錄入，但很快就到來，目前已經(jīng)在 ES-Next Stage 4 階段。

直接上例子，比如我們需要按順序獲取：產(chǎn)品數(shù)據(jù)=>用戶數(shù)據(jù)=>評(píng)論數(shù)據(jù)

傳統(tǒng)的寫法，無需解釋

// 獲取產(chǎn)品數(shù)據(jù)
ajax("products.json", (products) => {
    console.log("AJAX/products >>>", JSON.parse(products));

    // 獲取用戶數(shù)據(jù)
    ajax("users.json", (users) => {
        console.log("AJAX/users >>>", JSON.parse(users));

        // 獲取評(píng)論數(shù)據(jù)
        ajax("products.json", (comments) => {
            console.log("AJAX/comments >>>", JSON.parse(comments));
        });
    });
});

Promise 已經(jīng)被提及已久了，也是 ES6 的一部分。Promise 能消除 callback hell 帶來的厄運(yùn)金字塔，相比起來代碼更清晰了，但還是達(dá)不到編寫同步代碼的直觀程度。

// Promise
// 封裝 Ajax，返回一個(gè) Promise
function requestP(url) {
    return new Promise(function(resolve, reject) {
        ajax(url, (response) => {
            resolve(JSON.parse(response));
        });
    });
}

// 獲取產(chǎn)品數(shù)據(jù)
requestP("products.json").then((products) => {
    console.log("Promises/products >>>", products);
    // 獲取用戶數(shù)據(jù)
    return requestP("users.json");
}).then((users) => {
    console.log("Promises/users >>>", users);
    // 獲取評(píng)論數(shù)據(jù)
    return requestP("comments.json");
}).then((comments) => {
    console.log("Promises/comments >>>", comments);
});

Generators 也是 ES6 一個(gè)新的特性，能夠 暫停/執(zhí)行 代碼。yield 表示暫停，iterator.next 表示執(zhí)行下一步，如果你不了解 Generators 也沒關(guān)系，可以忽略它直接學(xué)習(xí) await/async。

// Generators
function request(url) {
    ajax(url, (response) => {
        iterator.next(JSON.parse(response));
    });
}

function *main() {
    // 獲取產(chǎn)品數(shù)據(jù)
    let data = yield request("products.json");

    // 獲取用戶數(shù)據(jù)
    let users = yield request("users.json");

    // 獲取評(píng)論數(shù)據(jù)
    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();

與 Promise 結(jié)合使用

// 封裝 Ajax，返回一個(gè) Promise
function requestP(url) {
    return new Promise(function(resolve, reject) {
        ajax(url, (response) => {
            resolve(JSON.parse(response));
        });
    });
}

(async () => {
    // 獲取產(chǎn)品數(shù)據(jù)
    let data = await requestP("products.json");

     // 獲取用戶數(shù)據(jù)
    let users = await requestP("users.json");

     // 獲取評(píng)論數(shù)據(jù)
    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 結(jié)合使用：

(async () => {
// Async/await using the fetch API
    try {

         // 獲取產(chǎn)品數(shù)據(jù)
        let products = await fetch("products.json");

        // Parsing products
        let parsedProducts = await products.json();

        // 獲取用戶數(shù)據(jù)
        let users = await fetch("users.json");

        // Parsing users
        let parsedUsers = await users.json();

        // 獲取評(píng)論數(shù)據(jù)
        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);
    }
}());

再次結(jié)合 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 用同步的思維去解決異步的代碼，感覺非常酷非常爽！

參考文獻(xiàn)[原文]：https://github.com/jaydson/es...