async/await是什么

async/await 是ES7提出的基于Promise的解決異步的最終方案。

async

async是一個(gè)加在函數(shù)前的修飾符，被async定義的函數(shù)會(huì)默認(rèn)返回一個(gè)Promise對(duì)象resolve的值。因此對(duì)async函數(shù)可以直接then，返回值就是then方法傳入的函數(shù)。

// async基礎(chǔ)語(yǔ)法
async function fun0(){
    console.log(1);
    return 1;
}
fun0().then(val=>{
    console.log(val) // 1,1
})

async function fun1(){
    console.log('Promise');
    return new Promise(function(resolve,reject){
        resolve('Promise')
    })
}
fun1().then(val => {
    console.log(val); // Promise Promise
})

await

await 也是一個(gè)修飾符，只能放在async定義的函數(shù)內(nèi)。可以理解為等待。

await 修飾的如果是Promise對(duì)象：可以獲取Promise中返回的內(nèi)容（resolve或reject的參數(shù)），且取到值后語(yǔ)句才會(huì)往下執(zhí)行；

如果不是Promise對(duì)象：把這個(gè)非promise的東西當(dāng)做await表達(dá)式的結(jié)果。

async function fun(){
    let a = await 1;
    let b = await new Promise((resolve,reject)=>{
        setTimeout(function(){
            resolve('setTimeout')
        },3000)
    })
    let c = await function(){
        return 'function'
    }()
    console.log(a,b,c)
}
fun(); // 3秒后輸出： 1 "setTimeout" "function"

function log(time){
    setTimeout(function(){
        console.log(time);
        return 1;
    },time)
}
async function fun(){
    let a = await log(1000);
    let b = await log(3000);
    let c = log(2000);
    console.log(a);
    console.log(1)
}
fun(); 
// 立即輸出 undefined 1
// 1秒后輸出 1000
// 2秒后輸出 2000
// 3秒后輸出 3000

async/await 的正確用法

// 使用async/await獲取成功的結(jié)果

// 定義一個(gè)異步函數(shù)，3秒后才能獲取到值(類似操作數(shù)據(jù)庫(kù))
function getSomeThing(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('獲取成功')
        },3000)
    })
}

async function test(){
    let a = await getSomeThing();
    console.log(a)
}
test(); // 3秒后輸出：獲取成功

附：async與await一些注意關(guān)鍵點(diǎn)小結(jié)

• await關(guān)鍵字必須位于async函數(shù)內(nèi)部
• await關(guān)鍵字后面需要一個(gè)promise對(duì)象（不是的話就調(diào)用resolve轉(zhuǎn)換它）
• await關(guān)鍵字的返回結(jié)果就是其后面Promise執(zhí)行的結(jié)果，可能是resolved或者rejected的值，注意最后執(zhí)行完的是個(gè)值。
• 不能在普通箭頭函數(shù)中使用await關(guān)鍵字，需要在箭頭函數(shù)前面添加async
• await用來(lái)串行的執(zhí)行異步操作，現(xiàn)實(shí)現(xiàn)并行可以考慮promise.all

async與await缺點(diǎn)

async函數(shù)中，如果有多個(gè)await關(guān)鍵字時(shí)，如果有一個(gè)await的狀態(tài)變成了rejected，那么后面的操作都不會(huì)繼續(xù)執(zhí)行，promise也是同理有這樣一個(gè)函數(shù)async

function getData()
{
let value=await get();
value++;
await set();//set完成后返回?cái)?shù)據(jù)
return value;
}

直接調(diào)用

var value=getData();

是對(duì)于這個(gè)函數(shù)直接調(diào)用的時(shí)候并不是你想要的返回值，因?yàn)閍sync方法返回的永遠(yuǎn)是一個(gè)promise，即使開發(fā)者返回的是一個(gè)常量，也會(huì)被自動(dòng)調(diào)用的promise.resolve方法轉(zhuǎn)換為一個(gè)promise。因此對(duì)于這種情況，上層調(diào)用方法也需要是async函數(shù)，采用如下方法

async function xxxx(){
var value=await getData();
return value;
}

對(duì)于這種調(diào)用，如果還存在更高層次的方法調(diào)用，那么從底層的異步操作開始，一直到最頂層一個(gè)不需要返回值的函數(shù)為止，全部的方法都要變成async。

總結(jié)

到此這篇關(guān)于async/await理解和用法的文章就介紹到這了,更多相關(guān)async/await用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論