es7中的async、await使用方法示例詳解

更新時間：2023年01月27日 10:07:00 投稿：yin

async、await是es7里面的新語法，async申明一個function是異步，而await等待一個異步方法執(zhí)行完成。替代promise中的then。async函數(shù)返回一個Promise對象，當函數(shù)執(zhí)行的時候，一旦遇到await就會先返回，等到觸發(fā)的異步操作完成，再接著執(zhí)行函數(shù)體內后面的語句。

async、await 是es7里面的新語法，它的作用就是 async 用于申明一個 function 是異步的，而 await 用于等待一個異步方法執(zhí)行完成。它可以很好的替代promise 中的then。async 函數(shù)返回一個 Promise 對象，可以使用then 方法添加回調函數(shù)。當函數(shù)執(zhí)行的時候，一旦遇到await 就會先返回，等到異步操作完成，再接著執(zhí)行函數(shù)體內后面的語句。

一、前言

回調是JavaScript在es5之前處理異步方法的常用方式，當異步調用又調用了異步方法時，前端的小伙伴們應該都遇到過這種場景吧，回調方式的寫法讓人看得頭皮發(fā)麻，代碼的可讀性非常差

ES2015中引入Promise, 目的就是為了解決著名的回調地獄，但是它自己引入了語法復雜性。示例如下：

function takeLongTime() {
    return new Promise(resolve => {
        setTimeout(() => resolve("long_time_value"), 1000);
    });
}
 
takeLongTime().then(v => {
    console.log("got", v);
});

ES2017增加了異步函數(shù)async/await，提高了代碼可讀性，讓調用異步方法像同步一樣簡單。示例如下：

function takeLongTime() {
    return new Promise(resolve => {
        setTimeout(() => resolve("long_time_value"), 1000);
    });
}
 
async function test() {
    const v = await takeLongTime();
    console.log(v);
}
 
test();

async/await使代碼看起來像是同步的，但它在后臺是異步和非阻塞的。可以理解 await 后面的語句相當于放到了 new Promise 中，下一行及之后的語句相當于放在 Promise.then 中。 async 會將其后的函數(shù)（函數(shù)表達式或 Lambda）的返回值封裝成一個 Promise 對象，而 await 會等待這個 Promise 完成，并將其 resolve 的結果返回出來。

二、async 和 await 的基礎使用

async/awiat 的使用規(guī)則:

async 返回的是一個 Promise 成功的對象，await 就是等待這個 promise 的返回結果后，再繼續(xù)執(zhí)行
await 等待的是一個 Promise 對象，后面必須跟一個 Promise 對象，但是不必寫 then ()，直接就可以得到返回值

但注意，await 所等待的 promise 對象，他的最終狀態(tài)一定是 resolve 的（當然也可以不是 resolve ，只不過不會執(zhí)行后面的代碼罷了），否則不會執(zhí)行await 后面的代碼，也就是不會去執(zhí)行所謂的 then() ;

三、async \ await使用場景

//將請求改造成一個通用函數(shù)
function request(options) {
    //.....
    return new Promise(....); //使用Promise執(zhí)行請求,并返回Promise對象
}
//于是我們就可以來發(fā)送請求了
request("ajaxA")
.then((data)=>{
   //處理data
   return request("ajaxB")
})
.then((data)=>{
   //處理data
   return request("ajaxC")
})
.then((data)=>{
   //處理data
   return request("ajaxD")
})

如果能像使用同步代碼那樣, 使用Promise就好了。于是, async \ await出現(xiàn)了

function request(options) {
    //.....
    return new Promise(....); //使用Promise執(zhí)行請求,并返回Promise對象
}
//wait這個單詞是等待的意思
async function load(){
    await request("ajaxA");  //那么這里就是在等待ajaxA請求的完成
    await request("ajaxB");
    await request("ajaxC");
    await request("ajaxD");
}

await關鍵字使用的要求非常簡單, 后面調用的函數(shù)要返回一個Promise對象。load()這個函數(shù)已經(jīng)不再是普通函數(shù), 它出現(xiàn)了await這樣"阻塞式"的操作因此async關鍵字在這是不能省略的。與之前長長的then鏈和then方法里的回調函數(shù)相比，這樣的寫法看起來像是同步寫法并且更加清爽，更加符合編程習慣。

四、await返回打印測試

await后面的promise狀態(tài)不是resolve的輸出結果

async function async1 () {
  console.log('async1 start');
  await new Promise(resolve => {
    console.log('promise1');
  })
  console.log('async1 success');
  return 'async1 end'
}
console.log('srcipt start')
async1().then(res => console.log(res))
console.log('srcipt end')

/* await后面的promise狀態(tài)不是resolve的輸出結果
"srcipt start"
"async1 start"
"promise1"
"srcipt end"
*/

這里我們可以看到：在 async1 中 await 后面的 Promise 是沒有返回值的，也就是它的狀態(tài)始終是 pending 狀態(tài)，所以在 await 之后的內容是不會執(zhí)行的，包括 async1 后面的 .then。

await后面的promise狀態(tài)是resolve的輸出結果

async function async1 () {
  console.log('async1 start');
  await new Promise(resolve => {
    console.log('promise1');
    resolve()
  })
  console.log('async1 success');
  return 'async1 end'
}
console.log('srcipt start')
async1().then(res => console.log(res))
console.log('srcipt end')

/*await后面的promise狀態(tài)是resolve的輸出結果
"srcipt start"
"async1 start"
"promise1"
"srcipt end"
"async1 success"
"async1 end"
*/