模板网站定制,马鞍山天立建设网站,津南网站建设,wordpress中文视频教程Promise Promise 是异步编程的一种新的解决方案和规范。 Promise优点:
1、可以很好地解决ES5中的回调地狱的问题#xff08;避免了层层嵌套的回调函数#xff09;。
2、统一规范、语法简洁、可读性和和可维护性强。
3、Promise 对象提供了简洁的 API#xff0c;使得管理异步…Promise Promise 是异步编程的一种新的解决方案和规范。 Promise优点:
1、可以很好地解决ES5中的回调地狱的问题避免了层层嵌套的回调函数。
2、统一规范、语法简洁、可读性和和可维护性强。
3、Promise 对象提供了简洁的 API使得管理异步任务更方便、更灵活。Promise的基本使用
// 封装异步任务
function requestData(url) {// resolve 和 reject 这两个单词是形参可以自由命名。大家的习惯写法是写成 resolve 和 rejectconst promise new Promise((resolve, reject) {const res {retCode: 0,data: qiangu yihaos data,errMsg: not login,};setTimeout(() {if (res.retCode 0) {// 网络请求成功resolve(res.data);} else {// 网络请求失败reject(res.errMsg);}}, 1000);});return promise;
}// 调用异步任务
requestData(www.qianguyihao.com/index1).then(data {console.log(异步任务执行成功:, data);
}).catch(err {console.log(异步任务执行失败:, err);
})// 再次调用异步任务
requestData(www.qianguyihao.com/index2).then(data {console.log(异步任务再次执行成功:, data);
}).catch(err {console.log(异步任务再次执行失败:, err);
})
Promise 的回调函数
onst promise new Promise(executor);
// 【划重点】下面这两行代码是等价的选其中一种写法即可。这两种写法没有区别只是写法形式上的区别
promise.then(onFulfilled, onRejected);
promise.then(onFulfilled).catch(onRejected);有了 Promise 之后我们不需要传入回调函数而是 先将 promise 实例化 然后在原来执行回调函数的地方改为执行对应的改变 promise 状态的函数 并通过 then … catch 或者 then …then 等写法实现链式调用提高代码可读性。 promise 在写法上的大致区别是定义异步函数的时候将 callback 改为 resolve 和 reject待状态改变之后
Promise 实例提供了如下方法 promise.then()异步任务成功的回调函数。 promise.catch()异步任务失败的回调函数。 promise.finaly()异步任务无论成功与否都会执行的回调函数。
Promise 的链式调用写法
// 【公共方法层】封装 ajax 请求的伪代码。传入请求地址、请求参数以及回调函数 success 和 fail。
function requestAjax(url, params, success, fail) {var xhr new xhrRequest();// 设置请求方法、请求地址。请求地址的格式一般是https://api.example.com/data? key1value1key2value2xhr.open(GET, url);// 设置请求头如果需要xhr.setRequestHeader(Content-Type, application/json);xhr.send();xhr.onreadystatechange function () {if (xhr.readyState 4 xhr.status 200) {success success(xhr.responseText);} else {fail fail(new Error(接口请求失败));}};
}// 【model层】将接口请求封装为 Promise
function requestData1(params_1) {return new Promise((resolve, reject) {requestAjax(https://api.qianguyihao.com/url_1, params_1, res {// 这里的 res 是接口返回的数据。返回码 retCode 为 0 代表接口请求成功。if (res.retCode 0) {// 接口请求成功时调用resolve(request success res);} else {// 接口请求异常时调用reject({ retCode: -1, msg: network error });}});});
}// requestData2、requestData3的写法与 requestData1类似。他们的请求地址、请求参数、接口返回结果不同所以需要挨个单独封装 Promise。
function requestData2(params_2) {return new Promise((resolve, reject) {requestAjax(https://api.qianguyihao.com/url_2, params_2, res {if (res.retCode 0) {resolve(request success res);} else {reject({ retCode: -1, msg: network error });}});});
}function requestData3(params_3) {return new Promise((resolve, reject) {requestAjax(https://api.qianguyihao.com/url_3, params_3, res {if (res.retCode 0) {resolve(request success res);} else {reject({ retCode: -1, msg: network error });}});});
}requestData1(params_1).then(res1 {console.log(第一个接口请求成功: JSON.stringify(res1));// 【关键代码】继续请求第二个接口。如果有需要也可以把 res1 的数据传给 requestData2()的参数return requestData2(res1);
}).then(res2 {console.log(第二个接口请求成功: JSON.stringify(res2));// 【关键代码】继续请求第三个接口。如果有需要也可以把 res2 的数据传给 requestData3()的参数return requestData3(res2);
}).then(res3 {console.log(第三个接口请求成功: JSON.stringify(res3));
}).catch(err {console.log(err);
})
就先了解一下吧! 等用的时候再详细学习
