小編給大家分享一下async/await如何讓異步操作同步執(zhí)行，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的濱湖網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

一.前言

我們經(jīng)常會(huì)遇到這樣的麻煩事,多個(gè)函數(shù)按順序執(zhí)行,返回結(jié)果卻不是我們預(yù)期的順序,原因一般是由于異步操作引起的,所以呢,我們需要一種解決方案來處理這種問題,從而使得異步操作按照同步的方式來執(zhí)行,這樣我們就可以控制異步操作輸出結(jié)果的順序了

二.異步操作會(huì)帶來什么問題

異步操作可能會(huì)許多的問題,下面是常見的兩種

1.函數(shù)執(zhí)行的結(jié)果并不是按照順序返回

function fn1(){
 console.log(111)
 setTimeout(function(){
  console.log('wait me 3000')
 },3000)
}
function fn2(){
 console.log(222)
}
fn1();
fn2();

//結(jié)果
//111
//222
//wait me 3000

上面的代碼,如果你期待的結(jié)果是

//111
//wait me 3000
//222

那就錯(cuò)了,因?yàn)閒n1函數(shù)里面還有一個(gè)函數(shù)setTimeout,這兩個(gè)函數(shù)是異步執(zhí)行的,而fn1和fn2是同步執(zhí)行的,先執(zhí)行fn1再執(zhí)行fn2,在執(zhí)行fn1的時(shí)候打印結(jié)果111,三秒后再執(zhí)行setTimeout,但是在這三秒之前已經(jīng)執(zhí)行完了fn2

那是不是由于setTimeout函數(shù)設(shè)置的等待時(shí)間太久了才會(huì)導(dǎo)致的呢?那下面我把時(shí)間設(shè)為0

function fn1(){
 console.log(111)
 setTimeout(function(){
  console.log('wait me 3000')
 },0)
}
function fn2(){
 console.log(222)
}
fn1();
fn2();
//結(jié)果
//111
//222
//wait me 3000

從結(jié)果上看并沒有改變,這是應(yīng)為setTimeout這個(gè)函數(shù)在執(zhí)行之前會(huì)查看執(zhí)行隊(duì)列看看有沒有人在排隊(duì),如果有,那么將等其他的函數(shù)執(zhí)行完再執(zhí)行自己,所以不管就算你設(shè)置時(shí)間為0,也不會(huì)改變它最后一個(gè)執(zhí)行

2.在外部獲取不到異步函數(shù)里的值

下面我們看一個(gè)最簡單的例子,我的需求是要在fn1函數(shù)外面打印msg

function fn1(){
 setTimeout(function(){
  msg='wait me 3000';
 },3000);
}
fn1();

那么怎么樣才能獲取到msg呢

使用回調(diào)函數(shù)

function fn1(callback){
 setTimeout(function(){
  msg='wait me 3000';
  callback(msg);
 },3000);
}
fn1(data=>{
 console.log(data);//wait me 3000
});

使用Promise

function fn1(){
 return new Promise(function(res,rej){
  setTimeout(function(){
   msg='wait me 3000';
   res(msg);
  },3000);
 })
}
fn1().then(data=>{
 console.log(data)
})

三.async/await解決方案

async/await的作用就是使異步操作以同步的方式去執(zhí)行

異步操作同步化?

可以使用Promise中的then()來實(shí)現(xiàn),那么async/await與它之間有什么區(qū)別呢

1.async函數(shù)返回的是一個(gè)Promise對(duì)象

如果一個(gè)函數(shù)加了async關(guān)鍵詞,這個(gè)函數(shù)又有返回值,在調(diào)用這個(gè)函數(shù)時(shí),如果函數(shù)執(zhí)行成功,內(nèi)部會(huì)調(diào)用Promise.solve()方法返回一個(gè)Promise對(duì)象,如果函數(shù)執(zhí)行出現(xiàn)異常,就會(huì)調(diào)用Promise.reject()方法返回一個(gè)promise 對(duì)象

要想獲取到async函數(shù)的執(zhí)行結(jié)果，就要調(diào)用Promise的then或catch來給它注冊(cè)回調(diào)函數(shù)

async function fn(){
 return '111'
}
console.log(fn());//Promise { '111' }

既然是Promise對(duì)象,因此可以使用then()獲取返回的結(jié)果

async function fn(){
 return '111'
}
fn().then(data=>{
 console.log(data)//111
})

2.await

上面介紹了async的作用,一般情況下,async與await配合使用才能使異步操作同步化,await就是等待的意思,等待某一個(gè)函數(shù)執(zhí)行完之后,后面的代碼才能開始執(zhí)行

function fn1(){
 return new Promise(resolve=>{
  setTimeout(function(){
   msg='wait me 3000';
   resolve(msg)
  },3000);
 });
}
async function asyncCall(){
 var result=await fn1();
 console.log(result); 
}
asyncCall();

如果我們沒有等待fn1執(zhí)行完之后再打印result,那么有可能得到是undefined

看完了這篇文章，相信你對(duì)“async/await如何讓異步操作同步執(zhí)行”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

新聞名稱：async/await如何讓異步操作同步執(zhí)行
文章網(wǎng)址：http://www.yijiale78.com/article44/gjhcee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計(jì)公司、Google、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)