用async/await 來處理異步

近期項目中大量使用async，從服務(wù)器獲取數(shù)據(jù)，解決一些并發(fā)傳參問題。代碼很簡單。在此也看了一些博客，現(xiàn)在async/await已經(jīng)大范圍讓使用，是時候總結(jié)一波啦。
先說一下async的語法，它作為一個關(guān)鍵字放在函數(shù)前面，用于表示函數(shù)是一個異步函數(shù)，因為async就是異步的異步，異步函數(shù)也就是意味著這個函數(shù)的執(zhí)行不會阻塞后面代碼的執(zhí)行。簡單的寫一個async函數(shù)

async function hello(){
    return 'hello world';
}

語法很簡單，就是在函數(shù)前面加上async，他就成異步函數(shù)啦。怎么去調(diào)用呢，其實一樣，平時怎么使用函數(shù)我們就怎么去調(diào)用它，直接加括號就可以啦，為了表示它沒有阻塞后面的代碼我們寫個案例

async function hello(){
  return 'hello world';
}
console.log(hello());
console.log('我是先執(zhí)行的');

好像沒有什么用，別急，首先我們看到hello()返回的是一個promise對象，其次它好像沒有去異步執(zhí)行。
async異步函數(shù)返回的是一個promise對象，如果要獲取到promise返回值，我們就應(yīng)該使用.then方法。

async function hello(){
  return 'hello world';
}
hello().then(result=>{
  console.log(result);
})
console.log('我是先執(zhí)行的');

然后就沒問題啦，一個簡單的異步函數(shù)就OK啦，hello執(zhí)行的時候沒有阻塞后面代碼的執(zhí)行，和我們之前說的一樣。
你可能注意到控制臺中的promise有一個resolved，這是async函數(shù)內(nèi)部的實現(xiàn)原理，如果async函數(shù)中返回一個值，當調(diào)用該函數(shù)時，內(nèi)部會調(diào)用promise.solve()方法把它轉(zhuǎn)化成一個promise()對象作為返回，但如果hello函數(shù)內(nèi)部發(fā)生錯誤呢？那么就會調(diào)用promise.reject()返回一個promise對象，這時修改一下hello()函數(shù)

async function hello(flag){
   if(flag){
      return 'hello world';
   }else{
       throw 'happen Error';
   }
}
console.log(hello(0));
console.log(hello(1));

如果函數(shù)內(nèi)部發(fā)生錯誤，promise對象有一個catch方法進行捕獲。

hello(0).catch(err=>{
  console.log(err);
})

async是差不多啦，我們再來熟悉一下await關(guān)鍵字，await是等待的意思，那么它在等待什么呢，它后面跟著什么呢？其實它后面可以放任何表達式，不過我們更多放的是一個promise對象的表達式。注意await關(guān)鍵字，只能放在async函數(shù)里面?。?！

function awaitMethod(num){
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{
      resolve(2*num);
    },2000)
  })
}

我們再寫一個async函數(shù)，從而可以使用await關(guān)鍵字，await后面放置的是返回promise對象的一個表達式，所以它后面可以寫上awaitMethod函數(shù)的調(diào)用。

async function test (){
  let result = await awaitMethod(30);
  console.log(result);
}

然后我們調(diào)用這個函數(shù)

test();

2秒鐘之后控制臺輸出60。
現(xiàn)在我們看看代碼的執(zhí)行過程，調(diào)用test函數(shù)時，它遇到了里面的await關(guān)鍵字，await代表等待，代碼到這里會暫停，它在等什么呢，等待后面的promise對象執(zhí)行完成，然后拿到promise的返回值，拿到返回值之后它繼續(xù)往下執(zhí)行，直到console.log()執(zhí)行。
就這一個函數(shù)，或許我們看不出來asycn和await的作用，如果我們要計算3個數(shù)的值，然后把他們的值加起來輸出，或許就看的明顯啦。

async function test(){
    let result = await awaitMethod(30);
    let result1 = await awaitMethod(50);
    let result2 = await awaitMethod(30);
    console.log(result+result1+result2 );
}

6秒之后控制臺，輸出220，我們可以看到，寫異步代碼的就像寫同步代碼一樣啦，再也沒有什么回調(diào)地獄這一說啦。

以上就是vue使用async/await來實現(xiàn)同步和異步的案例分享的詳細內(nèi)容，更多關(guān)于vue async/await來實現(xiàn)同步異步的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論