promise處理多個(gè)相互依賴的異步請(qǐng)求(實(shí)例講解)
在項(xiàng)目中,經(jīng)常會(huì)遇到多個(gè)相互依賴的異步請(qǐng)求。如有a,b,c三個(gè)ajax請(qǐng)求,b需要依賴a返回的數(shù)據(jù),c又需要a和b請(qǐng)求返回的數(shù)據(jù)。如果采用請(qǐng)求嵌套請(qǐng)求的方式自然是不可取的。導(dǎo)致代碼難以維護(hù),如何請(qǐng)求很多。會(huì)出現(xiàn)很多問(wèn)題。
Promise就是解決多個(gè)異步請(qǐng)求的問(wèn)題。 Promise是ES6提供的一個(gè)對(duì)象,用來(lái)傳遞異步操作的消息。
Promise有三種狀態(tài):Pending(進(jìn)行中)、Resolved(已完成,又稱 Fulfilled)和 Rejected(已失?。?/p>
直接上代碼。有a,b請(qǐng)求,b依賴a的請(qǐng)求數(shù)據(jù)。如下:
function a(){
return new Promise(function(res,rej){
$.ajax({
url:"a",
type: "GET",
async:true,
dataType:"json",
success:function(data){
console.log(data,"a");
res(data);
}
})
});
}
function b(data){
console.log(data,"data");
return new Promise(function(res,rej){
$.ajax({
url:"b",
type: "POST",
async:true,
data:JSON.stringify(data),
dataType:"json",
success:function(data){
console.log(data,"b");
res();
}
})
});
}
$("#btn").click(function(){
a().then(function (data){
b(data);
}).then(function(){
})
})
接口url在網(wǎng)上找了一個(gè),可以看運(yùn)行結(jié)果:

以上這篇promise處理多個(gè)相互依賴的異步請(qǐng)求(實(shí)例講解)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
基于js實(shí)現(xiàn)抽紅包并分配代碼實(shí)例
這篇文章主要介紹了基于js實(shí)現(xiàn)抽紅包并分配代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
用循環(huán)或if語(yǔ)句從json中取數(shù)據(jù)示例
倘若想將id和pid數(shù)據(jù)依次取出,就只能用循環(huán),若想有選擇性的輸出時(shí),需要添加if條件2014-08-08
js cookies實(shí)現(xiàn)簡(jiǎn)單統(tǒng)計(jì)訪問(wèn)次數(shù)
js cookies實(shí)現(xiàn)簡(jiǎn)單統(tǒng)計(jì)訪問(wèn)次數(shù)的實(shí)現(xiàn)代碼。主要是掌握js對(duì)cookies的操作。2009-11-11
JavaScript中Array數(shù)組常用方法(附上相應(yīng)的用法及示例)
這篇文章主要給大家介紹了關(guān)于JavaScript中Array數(shù)組常用方法,文中附上相應(yīng)的用法及示例,需要的朋友可以參考下2024-01-01
js+css實(shí)現(xiàn)扇形導(dǎo)航效果
這篇文章主要為大家詳細(xì)介紹了js+css實(shí)現(xiàn)扇形導(dǎo)航效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08
layui頁(yè)面級(jí)彈出框的實(shí)現(xiàn)
本文主要介紹了layui頁(yè)面級(jí)彈出框的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02
javascript版的in_array函數(shù)(判斷數(shù)組中是否存在特定值)
這篇文章主要介紹了javascript版的in_array函數(shù)(判斷數(shù)組中是否存在特定值),需要的朋友可以參考下2014-05-05
JavaScript實(shí)現(xiàn)動(dòng)態(tài)刪除列表框值的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)刪除列表框值的方法,涉及javascript針對(duì)select列表框的遍歷與刪除操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
js中小數(shù)向上取整數(shù),向下取整數(shù),四舍五入取整數(shù)的實(shí)現(xiàn)(必看篇)
下面小編就為大家?guī)?lái)一篇js中小數(shù)向上取整數(shù),向下取整數(shù),四舍五入取整數(shù)的實(shí)現(xiàn)(必看篇)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02

