async/await如何讓異步操作同步執(zhí)行
小編給大家分享一下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ù)期的順序,原因一般是由于異步操作引起的,所以呢,我們需要一種解決方案來(lái)處理這種問題,從而使得異步操作按照同步的方式來(lái)執(zhí)行,這樣我們就可以控制異步操作輸出結(jié)果的順序了
二.異步操作會(huì)帶來(lái)什么問題
異步操作可能會(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è)最簡(jiǎn)單的例子,我的需求是要在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()來(lái)實(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來(lái)給它注冊(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í)行
本文鏈接：http://m.jiaotiyi.com/article/gjhcee.html