JavaScript中await和async有什么作用-創(chuàng)新互聯(lián)

await/async簡(jiǎn)介

成都創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司一直秉承“誠(chéng)信做人，踏實(shí)做事”的原則，不欺瞞客戶(hù)，是我們最起碼的底線！以服務(wù)為基礎(chǔ)，以質(zhì)量求生存，以技術(shù)求發(fā)展，成交一個(gè)客戶(hù)多一個(gè)朋友！專(zhuān)注中小微企業(yè)官網(wǎng)定制，網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站，塑造企業(yè)網(wǎng)絡(luò)形象打造互聯(lián)網(wǎng)企業(yè)效應(yīng)。

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

async/await特點(diǎn)

async/await更加語(yǔ)義化，async 是“異步”的簡(jiǎn)寫(xiě)，async function 用于申明一個(gè) function 是異步的； await，可以認(rèn)為是async wait的簡(jiǎn)寫(xiě)，用于等待一個(gè)異步方法執(zhí)行完成；

async/await是一個(gè)用同步思維解決異步問(wèn)題的方案（等結(jié)果出來(lái)之后，代碼才會(huì)繼續(xù)往下執(zhí)行）

可以通過(guò)多層 async function 的同步寫(xiě)法代替?zhèn)鹘y(tǒng)的callback嵌套

async function語(yǔ)法

自動(dòng)將常規(guī)函數(shù)轉(zhuǎn)換成Promise，返回值也是一個(gè)Promise對(duì)象

只有async函數(shù)內(nèi)部的異步操作執(zhí)行完，才會(huì)執(zhí)行then方法指定的回調(diào)函數(shù)

異步函數(shù)內(nèi)部可以使用await

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

老朋友 Ajax

傳統(tǒng)的寫(xiě)法，無(wú)需解釋

// 獲取產(chǎn)品數(shù)據(jù)
ajax('products.json', (products) => {
    console.log('AJAX/products >>>', JSON.parse(products));
    // 獲取用戶(hù)數(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

Promise 已經(jīng)被提及已久了，也是 ES6 的一部分。Promise 能消除 callback hell 帶來(lái)的厄運(yùn)金字塔，相比起來(lái)代碼更清晰了。

// 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(function(products){
    console.log('Promises/products >>>', products);
});
// 獲取用戶(hù)數(shù)據(jù)
requestP('users.json').then(function(users){
    console.log('Promises/users >>>', users);
});
// 獲取評(píng)論數(shù)據(jù)
requestP('comments.json').then(function(comments){
    console.log('Promises/comments >>>', comments);
});

當(dāng)然使用 Promise.all 可以更簡(jiǎn)潔

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

強(qiáng)勁的新朋友 Generators

Generators 也是 ES6 一個(gè)新的特性，能夠暫停/執(zhí)行代碼。yield 表示暫停，iterator.next 表示執(zhí)行下一步，如果你不了解 Generators 也沒(méi)關(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');
    // 獲取用戶(hù)數(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();
碉堡的朋友 await/async
與 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');
     // 獲取用戶(hù)數(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();
        // 獲取用戶(hù)數(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);
    }
}());

按數(shù)組順序執(zhí)行

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

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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站名稱(chēng)：JavaScript中await和async有什么作用-創(chuàng)新互聯(lián)
文章分享：http://muchs.cn/article32/djegsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、App設(shè)計(jì)、網(wǎng)站建設(shè)、企業(yè)建站、用戶(hù)體驗(yàn)、網(wǎng)站排名

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容