在需要依赖完成的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对象