前端排坑指南(三)

前端排坑指南(三)

妙用promise

最近遇到一道面试题：

1. 多次请求合并为一次请求
2. 一起请求后分发给多次请求

废话不多说，上代码

// 假设获取用户的信息方法
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弹窗举例

1. 引入dialog弹窗。
2. 调用dialog弹窗组件的open函数，open函数返回给父组件一个Promise
3. 同时options把resolve保留给自己的内部变量
4. 当dialog弹窗内逻辑完成，或者关闭弹窗时，就可以主动触发resolve。
5. 此时父组件就可以监听到子组件变化，完成交互。
6. 这样就减少了不必要的双向交互。

总结

类似的情况还有很多很多。Promise的特性可以更加合理的运用。