用async/await 來處理異步

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

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

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

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

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

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

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

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

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

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

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

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

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

test();

2秒鐘之后控制臺輸出60。
現(xiàn)在我們看看代碼的執(zhí)行過程，調(diào)用test函數(shù)時(shí)，它遇到了里面的await關(guān)鍵字，await代表等待，代碼到這里會(huì)暫停，它在等什么呢，等待后面的promise對象執(zhí)行完成，然后拿到promise的返回值，拿到返回值之后它繼續(xù)往下執(zhí)行，直到console.log()執(zhí)行。
就這一個(gè)函數(shù)，或許我們看不出來asycn和await的作用，如果我們要計(jì)算3個(gè)數(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來實(shí)現(xiàn)同步和異步的案例分享的詳細(xì)內(nèi)容，更多關(guān)于vue async/await來實(shí)現(xiàn)同步異步的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論