用async/await 來處理異步

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

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

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

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

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

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

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

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

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

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

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

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

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

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

然后我們調用這個函數

test();

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

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，我們可以看到，寫異步代碼的就像寫同步代碼一樣啦，再也沒有什么回調地獄這一說啦。

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

最新評論