本文主要和大家分享ajax和promise的結合使用方法，在需要依賴完成的ajax請求可使用promise保證執行順序 在第一個請求正確返回後再發送第二個請求。希望能幫助大家。
/*
定义一个使用promise的ajax请求,这里依赖jquery
参数中请求url为必填参数
*/
const ajaxPromise= param => {
return new Promise((resovle, reject) => {
$.ajax({
"type":param.type || "get",
"async":param.async || true,
"url":param.url,
"data":param.data || "",
"success": res => {
resovle(res);
},
"error": err => {
reject(err);
}
})
})
}
/*
第一个请求
*/
let step1 = () => {
ajaxPromise({
"url":"",
}).then(res => {
console.log("第一个请求正确返回==>"+res);
step2(res);
}).catch(err => {
console.log("第一个请求失败");
})
}
/*
第二个请求
*/
let step2 = (res) => {
ajaxPromise({
"type":"get",
"url":"",
"data":{"name":res}
}).then(res => {
console.log("第二个请求正确返回==>"+res);
}).catch(err => {
console.log("第二个请求失败==>"+err);
})
}
step1();原生js寫入ajaxpromise物件
const ajaxPromise = param => {
return new Promise((resovle, reject) => {
var xhr = new XMLHttpRequest();
xhr.open(param.type || "get", param.url, true);
xhr.send(param.data || null);
xhr.onreadystatechange = () => {
var DONE = 4; // readyState 4 代表已向服务器发送请求
var OK = 200; // status 200 代表服务器返回成功
if(xhr.readyState === DONE){
if(xhr.status === OK){
resovle(JSON.parse(xhr.responseText));
} else{
reject(JSON.parse(xhr.responseText));
}
}
}
})
}關於promise使用時的幾點：
使用方法：先建立一個promise物件new Promise(),根據業務需求判斷執行成功或失敗，成功呼叫resovle(),失敗則呼叫reject()。
Promise物件的then(onFulfilled，onRejected)有兩個參數，成功執行onFulfilled，失敗執行onRejectd
p.then(function(value) {
// fulfillment成功
}, function(reason) {
// rejection失败
});
//不过通常会使用catch()来捕获失败，上段代码通常写为：
p.then(function(value) {
// fulfillment成功
}).catch(function(reason) {
//rejection失败
})Promise物件的then ()會傳回一個新的Promise物件
相關推薦：
以上是ajax和promise的結合使用方法分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！
