JavaScript中await和async有什么作用

await/async簡介

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

async/await特點

async/await更加語義化，async 是“異步”的簡寫，async function 用于申明一個 function 是異步的； await，可以認為是async wait的簡寫， 用于等待一個異步方法執行完成；

async/await是一個用同步思維解決異步問題的方案（等結果出來之后，代碼才會繼續往下執行）

可以通過多層 async function 的同步寫法代替傳統的callback嵌套

async function語法

自動將常規函數轉換成Promise，返回值也是一個Promise對象

只有async函數內部的異步操作執行完，才會執行then方法指定的回調函數

異步函數內部可以使用await

直接上例子，比如我們需要按順序獲取：產品數據=>用戶數據=>評論數據

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

當然使用 Promise.all 可以更簡潔

Promise.all([
    requestP('products.json'),
    requestP('users.json'),
    requestP('comments.json')
])
.then(function(data) {
    console.log('Parallel promises >>>', 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('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);
    }
}());

按數組順序執行

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

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