async和await要搭配Promise使用, 它進(jìn)一步極大的改進(jìn)了Promise的寫法
來看一個簡單的場景:
//假設(shè)有4個異步方法要按順序調(diào)用
new Promise(function(resolve){
????ajaxA("xxxx",()=>{resolve();})
}).then(function(){
????return new Promise(function(resolve){
????????ajaxB("xxxx",()=>{resolve();})
}).then(function(){
? ? ?returnnewPromise(function(resolve){
????????ajaxC("xxxx",()=>{resolve();})
}).then(function(){ajaxD("xxxx");});
語法上不夠簡潔, 我們可以稍微改造一下
//將請求改造成一個通用函數(shù)
functionrequest(options){
????????//.....
????????returnnewPromise(....);//使用Promise執(zhí)行請求,并返回Promise對象
}
//于是我們就可以來發(fā)送請求了
request("http://xxxxxx").then((data)=>{
????//處理data
})
然后我們再來重新改造開頭的代碼
request("ajaxA")
.then((data)=>{
????//處理data
????return request("ajaxB")})
.then((data)=>{
????//處理data
????return request("ajaxC")})
.then((data)=>{
????//處理data
????return request("ajaxD")
})
比起之前有了不小的進(jìn)步, 但是看上去依然不夠簡潔
如果我能像使用同步代碼那樣, 使用Promise就好了
于是, async \ await出現(xiàn)了
async function load()
{
????await request("ajaxA");
????awaitrequest("ajaxB");
????awaitrequest("ajaxC");
????awaitrequest("ajaxD");
}
await關(guān)鍵字使用的要求非常簡單,后面調(diào)用的函數(shù)要返回一個Promise對象load()這個函數(shù)已經(jīng)不再是普通函數(shù),它出現(xiàn)了await這樣"阻塞式"的操作因此async關(guān)鍵字在這是不能省略的
那么現(xiàn)在看, 這段代碼變得異常清秀
代碼的編寫順序
代碼的閱讀順序
代碼的執(zhí)行順序
全部都是按照同步的習(xí)慣來的
是不是很方便.
到這你已經(jīng)學(xué)會了async和await基本使用方式
下面來簡單解釋一下它的工作流程
//wait這個單詞是等待的意思
asyncfunctionload(){
????awaitrequest("ajaxA");//那么這里就是在等待ajaxA請求的完成????
????awaitrequest("ajaxB");
????awaitrequest("ajaxC");
????awaitrequest("ajaxD");
}
如果后一個請求需要前一個請求的結(jié)果怎么辦呢?
傳統(tǒng)的寫法是這樣的
request("ajaxA")
.then((data1)=>{
????returnrequest("ajaxB",data1);
})
.then((data2)=>{
????returnrequest("ajaxC",data2)
})
.then((data3)=>{
????returnrequest("ajaxD",data3)
})
而使用async/await是這樣的
asyncfunctionload(){
????let data1=await request("ajaxA");
????let data2=await request("ajaxB",data1);
????let data3=await request("ajaxC",data2);
????let data4=await request("ajaxD",data3);
????//await不僅等待Promise完成, 而且還拿到了resolve方法的參數(shù)
}
注意當(dāng)一個函數(shù)被async修飾以后, 它的返回值會被自動處理成Promise對象
關(guān)于異常處理
async functionload(){????//請求失敗后的處理, 可以使用try-catch來進(jìn)行try{
????let data1=await request("ajaxA");
????let data2=await request("ajaxB",data1);
????let data3=await request("ajaxC",data2);
} catch(e){
????//......
????}????
}
