当前位置：首页 > news >正文

前端学习---(6)js基础--4

news 2025/6/27 15:55:05

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 yihao`s 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?' + 'key1=value1&key2=value2'xhr.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);
})