前端排坑指南(三)
妙用promise
最近遇到一道面试题:
- 多次请求合并为一次请求
- 一起请求后分发给多次请求
废话不多说,上代码
// 假设获取用户的信息方法
const getUserInfo = (arr = []) => new Promise((resolve) => {
resolve(arr.map((item, index) => `${item}info${index + 1}`));
});
// 测试函数打印成功
// getUserInfo([1, 2, 3]).then(res => {
// console.log(res);
// });
// 编写getUserInoById
// 需求:
// 1、按入参个数进行重载
// 2、多次条用,合并请求参数,进行一次请求
// 3、分发多次请求结果
// 第一步:实现简单单一请求
// async function getUserInfoById(id) {
// const resList = getUserInfo([id]).catch(err => { throw(err) })
// return new Promise((resolve) => {
// resolve(resList(0))
// })
// }
// 第二部:防抖暂存多次请求入参, 闭包暂存, 合并入参, 统一返回promise
// const getUserInfoById = debounce();
// function debounce() {
// let timer = null;
// let params = [];
// let promiseList = [];
// return function () {
// // 合并参数
// params.push(arguments[0]);
// if (timer !== null) clearTimeout(timer);
// timer = setTimeout(async () => {
// const resList = await getUserInfo(params).catch(err => { throw(err) });
// promiseList.forEach((itemResolve, index) => {
// itemResolve(resList[index]);
// })
// }, 10);
// return new Promise((resolve) => {
// promiseList.push(resolve);
// })
// };
// };
// // 测试合并参数
// getUserInfoById(1);
// getUserInfoById(2);
// 第三步, 请求接口,实现分发
const getUserInfoById = debounce();
function debounce() {
let timer = null;
let params = [];
let promiseList = [];
return function () {
// 合并参数
params.push(arguments[0]);
if (timer !== null) clearTimeout(timer);
timer = setTimeout(async () => {
console.log('发起请求');
const resList = await getUserInfo(params).catch(err => { throw(err) });
promiseList.forEach((itemResolve, index) => {
itemResolve(resList[index]);
})
}, 10);
return new Promise((resolve) => {
promiseList.push(resolve);
})
};
};
// 测试分发
getUserInfoById(1).then(res => { console.log(res, '第一次请求') });
getUserInfoById(2).then(res => { console.log(res, '第二次请求') });
探索
上面的代码我们就已经发现,
Promise
构建的对象,resolve
的执行会触发对应的then
执行。
所以抛出一个Promise
对象,就类似完成了一次订阅发布的过程
其他运用
我们在开发vue和react的时候,常常会封装组件。拿常见的dialog
弹窗举例
- 引入dialog弹窗。
- 调用dialog弹窗组件的open函数,open函数返回给父组件一个
Promise
- 同时options把resolve保留给自己的内部变量
- 当dialog弹窗内逻辑完成,或者关闭弹窗时,就可以主动触发resolve。
- 此时父组件就可以监听到子组件变化,完成交互。
- 这样就减少了不必要的双向交互。
总结
类似的情况还有很多很多。Promise
的特性可以更加合理的运用。