当前位置: 首页 > article >正文

手动实现promise的all,race,finally方法

Promise.all

是一个非常有用的工具,它接受一个 Promise 对象数组,并返回一个新的 Promise。当所有输入的 Promise 都成功解决时,新的 Promise 会解决为一个包含所有结果的数组;如果任何一个 Promise 被拒绝,新的 Promise 会立即被拒绝,并返回第一个被拒绝的错误。

 function myPromiseAll(promiseArray) {
        return new Promise((resolve, reject) => {
            //1.参数检查:
            //检查传入的参数是否为数组,如果不是数组,则抛出 TypeError。
          if (!Array.isArray(promiseArray)) {
            return reject(new TypeError("arguments must be an array"))
          }
          //2.初始化:
          //创建一个 results 数组来存储每个 Promise 的结果。
          //初始化 count 计数器,用于记录已经完成的 Promise 数量。
          //获取 promises 数组的总长度 len。
          let result = []
          let count = 0
          const len = promiseArray.length
          //3.特殊情况处理:
          //如果 promises 数组为空,直接返回一个已解决的 Promise,其结果为一个空数组。
          if (len === 0) {
            resolve(result)
          }
        //4.遍历 Promise 数组:
        //使用 for循环 遍历 promises 数组。
        //对每个 Promise 使用 Promise.resolve 确保它是 Promise 对象。
        //使用 then 方法处理每个 Promise 的成功和失败情况:
        //成功时,将结果存储在 results 数组中,并增加 count。
        //如果 count 达到 len,说明所有 Promise 都已成功解决,调用 resolve 方法,传递 results 数组。
        //失败时,立即调用 reject 方法,传递错误信息。
          for (let i = 0; i < len; i++) {
            Promise.resolve(promiseArray[i])
              .then((res) => {
                result[i] = res
                count++
                if (count === len) {
                  resolve(result)
                }
              })
              .catch((err) => reject(err))
          }
        })
      }
      
      
      // 示例代码

const promise1 = Promise.resolve(1);

const promise2 = Promise.resolve(2);

const promise3 = new Promise((resolve) => setTimeout(() => resolve(3), 1000));

const promise4 = Promise.reject('Error');


myPromiseAll([promise1, promise2, promise3])
  .then((results) => {
    console.log('All promises resolved:', results); // 输出: All promises resolved: [1, 2, 3]
  })
  .catch((error) => {
    console.error('An error occurred:', error);
  });


myPromiseAll([promise1, promise2, promise4])
  .then((results) => {
    console.log('All promises resolved:', results);
  })
  .catch((error) => {
    console.error('An error occurred:', error); // 输出: An error occurred: Error
  });

Promise.race

接受一个 Promise 对象数组,并返回一个新的 Promise。新的 Promise 会在第一个输入的 Promise 被解决或拒绝时立即解决或拒绝,其结果或错误信息取决于第一个完成的 Promise。

 function myPromiseRace(promiseArray) {
        return new Promise((resolve, reject) => {
            //1.参数检查:
            //检查传入的参数是否为数组,如果不是数组,则抛出 TypeError。
          if (!Array.isArray(promiseArray)) {
            return reject(new TypeError("arguments must be an array"))
          }
            //2.遍历 Promise 数组:
            //使用 for 循环遍历 promises 数组。
            //对每个 Promise 使用 Promise.resolve 确保它是 Promise 对象。
            //使用 then 方法处理每个 Promise 的成功和失败情况:
            //成功时,立即调用 resolve 方法,传递结果值。
            //失败时,立即调用 reject 方法,传递错误信息。
          for (let i = 0; i < promiseArray.length; i++) {
              //写法一:
            Promise.resolve(promiseArray[i]).then(
              (res) => {
                resolve(res)
              },
              (error) => {
                reject(error)
              }
            )
            //写法二:
            //Promise.resolve(promiseArray[i]).then(resolve, reject)
          }
        })
      }
     
     // 示例代码

const promise1 = Promise.resolve(1);

const promise2 = new Promise((resolve) => setTimeout(() => resolve(2), 1000));

const promise3 = new Promise((resolve) => setTimeout(() => resolve(3), 500));

const promise4 = Promise.reject('Error');


myPromiseRace([promise1, promise2, promise3])
  .then((result) => {
    console.log('First resolved promise:', result); // 输出: First resolved promise: 1
  })
  .catch((error) => {
    console.error('An error occurred:', error);
  });


myPromiseRace([promise2, promise3, promise4])
  .then((result) => {
    console.log('First resolved promise:', result);
  })
  .catch((error) => {
    console.error('An error occurred:', error); // 输出: An error occurred: Error
  });

Promise.finally

用于指定不管 Promise 最终状态如何,都会执行的操作。这个方法通常用于清理工作,比如关闭文件句柄、清除定时器等。

正常使用:

promise
  .then((result) => {
    // 处理已解决的情况
  })
  .catch((error) => {
    // 处理已失败的情况
  })
  .finally(() => {
    // 不管Promise对象最终的状态如何,都会执行的回调函数
  });

手动实现:

function myPromiseFinally(promise, callback) {
        return promise.then(
            //接受两个参数:一个 Promise 对象 promise 和一个回调函数 callback。
            //使用 then 方法分别处理 promise 的成功和失败情况。
            //在成功的情况下,先调用 callback 回调函数,然后返回原始的成功值。
            //在失败的情况下,先调用 callback 回调函数,然后重新抛出原始的错误。
          (value) => Promise.resolve(callback()).then(() => value),
          (error) =>
            Promise.resolve(callback()).then(() => {
              throw error
            })
        )
      }
     
      //示例代码: 
const promise1 = Promise.resolve(1);
const promise2 = new Promise((resolve) => setTimeout(() => resolve(2), 1000));
const promise3 = new Promise((resolve, reject) => setTimeout(() => reject('Error'), 500));

// 成功的情况
myPromiseFinally(promise1, () => {
  console.log('Finally block executed');
}).then((result) => {
  console.log('Result:', result); // 输出: Result: 1
}).catch((error) => {
  console.error('Error:', error);
});

// 延迟成功的情况
myPromiseFinally(promise2, () => {
  console.log('Finally block executed');
}).then((result) => {
  console.log('Result:', result); // 输出: Result: 2
}).catch((error) => {
  console.error('Error:', error);
});

// 失败的情况
myPromiseFinally(promise3, () => {
  console.log('Finally block executed');
}).then((result) => {
  console.log('Result:', result);
}).catch((error) => {
  console.error('Error:', error); // 输出: Error: Error
});


http://www.kler.cn/a/389002.html

相关文章:

  • [前端]NodeJS常见面试题目
  • 前端神经网络入门(三):深度学习与机器学习的关系、区别及核心理论支撑 - 以Brain.js示例
  • (干货)Jenkins使用kubernetes插件连接k8s的认证方式
  • 《深度解析 C++中的弱引用(weak reference):打破循环依赖的利器》
  • 网络安全-蓝队基础
  • L10.【LeetCode笔记】回文链表
  • 深入理解Linux内核中的虚拟文件系统(VFS)
  • Mac中禁用系统更新
  • g++/gcc版本切换
  • 传输协议设计与牧村摆动(Makimoto‘s Wave)
  • 18、论文阅读:AOD-Net:一体化除雾网络
  • 【系统架构设计师】高分论文:论企业集成平合的技术与应用
  • Linux五种IO模型和fctnl的使用
  • [护网杯 2018]easy_tornado
  • 中国药品注册审批数据库- 药品注册信息查询与审评进度查询方法
  • 《deep learning for AI》文献翻译及总结
  • DICOM(数字成像和通信医学)简介 【C#】
  • 移动应用开发:简易登录页
  • 用redis实现签到功能
  • 屏幕后期处理
  • 深度学习之卷积问题
  • Flutter鸿蒙next 使用 BLoC 模式进行状态管理详解
  • 【Axure视频教程】多选按钮控制元件显示和隐藏
  • 汽车共享管理:SpringBoot技术深度解析
  • 【Spring 框架】初识 Spring
  • 鸿蒙系统:安卓与iOS的强劲对手