ajax改promise,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对象

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。