实现Promise的resolve/reject/then/all/race/finally/catch方法

已于 2022-08-21 20:16:50 修改
阅读量808 收藏 1
点赞数
分类专栏： javaScript实战篇 文章标签： javascript
于 2022-08-21 18:30:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44472790/article/details/126453714
版权

promise实现基本思路和基本原理:
1.Promise三种状态Pending-等待 Fulfilled-成功 Rejected-失败
2.Promise中的状态使用resolve和reject 2个函数改变状态 并且是不可逆
3.executer如果有错误代码 那么Promise的状态会修改为rejected状态
4.Promise传入一个参数executer执行器,有两个参数分别是resolve和reject函数
5.then方法传入两个参数,分别是onFulfilled和onReject两个函数,当Promise内部状态改变时,调用相关状态回调函数
6.多次调用then方法思路：
(1) 多次调用then方法,应该把onFulfilled和onReject方法缓存
(2) 当Promise状态改变时,去触发相应状态缓存的方法
(3) 发布订阅模式
7.then实现链式调用
(1) 链式调用返回一个Promise
(2) then如果返回是一个普通值,那么作为下一个then的结果
(3) then抛出异常 那么作为下一个then的失败结果
(4) then返回是一个Promise 需要等待这个Promise执行完
8.catch的实现,其实就是将then方法中的第二个参数onReject实现报错调用
9.finally的实现,无论是成功还是失败都会调用执行
10.Promise.all 原理：当传入的数组每一个promise调用结果状态都是成功,那么返回一个数组包含入参返回值
11.Promise.race 原理：当传入的数组每一个promise调用,返回值由最快改变状态的Promise决定

代码实现

1.定义Promise三种状态和调用executer函数执行，定义status、value 、callbacks 等类成员变量,处理有可能报错

class MyPromise {
	 static PENDING = 'pending';
	  static FULFILLED = 'fulfilled';
	  static REJECTED = 'rejected';
	  
	 constructor(executer) {
	    //初始状态
	    this.status = MyPromise.PENDING;
	    //初始值
	    this.value = null;
	    //等待状态成功和失败函数暂时存放起来
	    this.callbacks = [];
	
	    //传入的函数 resolve 和 reject参数
	    try {
	      executer(this.resolve.bind(this), this.reject.bind(this));
	    } catch (error) {
	      this.reject.bind(this, error);
	    }
	  }

}

2.实现类resolve和reject方法

 resolve(val) {
    //只有pending状态才会改变
    if (this.status === MyPromise.PENDING) {
      this.status = MyPromise.FULFILLED;
      this.value = val;

      //多次触发then和异步处理方案
      setTimeout(() => {
        this.callbacks.map((callback) => {
          callback.onFulfilled(val);
        });
      });
    }
  }

  reject(reason) {
    //只有pending状态才会改变
    if (this.status === MyPromise.PENDING) {
      this.status = MyPromise.REJECTED;
      this.value = reason;

      //多次触发then和异步处理方案
      setTimeout(() => {
        this.callbacks.map((callback) => {
          callback.onReject(reason);
        });
      });
    }
  }

3.实现类then的方法和链式调用

then(
    onFulfilled = (val) => val,
    onReject = (reason) => {
      throw reason;
    }
  ) {
    const promise = new MyPromise((resolve, reject) => {
      switch (this.status) {
        //等待状态
        case MyPromise.PENDING:
          this.callbacks.push({
            onFulfilled: (val) => {
              try {
                const res = onFulfilled(val);
                this.resolvePromise(promise, res, resolve, reject);
              } catch (error) {
                reject(error);
              }
            },
            onReject: (reason) => {
              try {
                const res = onReject(reason);
                this.resolvePromise(promise, res, resolve, reject);
              } catch (error) {
                reject(error);
              }
            },
          });
          break;

        //成功状态
        case MyPromise.FULFILLED:
          //异步执行 替代微任务
          setTimeout(() => {
            try {
              const res = onFulfilled(this.value);
              this.resolvePromise(promise, res, resolve, reject);
            } catch (error) {
              reject(error);
            }
          });

          break;
        //失败状态
        case MyPromise.REJECTED:
          //异步执行 替代微任务
          setTimeout(() => {
            try {
              const resErr = onReject(this.value);
              //这里注意 上一步的是reject状态 下一个链式then接收结果是resolve接收
              resolve(resErr);
            } catch (error) {
              reject(error);
            }
          });
          break;
      }
    });
    //返回一个promise实例
    return promise;
  }

4.实现类catch的方法

 catch(onReject) {
    return this.then(undefined, onReject);
  }

5.实现类finally的方法

  //成功和失败都会执行
  finally(callback) {
    return this.then(
      (val) => {
        return MyPromise.resolve(callback()).then(() => val);
      },
      (reason) => {
        return MyPromise.resolve(callback()).then(() => reason);
      }
    );
  }

6.实现类then核心代码复用逻辑resolvePromise

//then核心代码复用逻辑
  resolvePromise(p, res, resolve, reject) {
    //不能重复传入同一个Promise
    if (p === res) throw new TypeError('Chaining cycle detected');

    try {
      // 返回结果是一个promise对象 那么直接调用then
      if (res instanceof MyPromise) {
        res.then(
          (val) => resolve(val),
          (reason) => reject(reason)
        );
      } else {
        resolve(res);
      }
    } catch (error) {
      reject(error);
    }
  }

7.实现静态方法resolve

//静态resolve 返回一个promise 执行resolve方法
  static resolve(val) {
    return new MyPromise((resolve, reject) => {
      if (val instanceof MyPromise) {
        val.then(resolve, reject);
      } else {
        resolve(val);
      }
    });
  }

8.实现静态方法reject

//静态resolve 返回一个promise 执行reject方法
  static reject(reason) {
    return new MyPromise((resolve, reject) => {
      reject(reason);
    });
  }

9.静态all方法 数组所有promise都请求成功才返回resolve 有一个失败就直接reject返回

static all(promiseArr) {
    const values = [];

    return new MyPromise((resolve, reject) => {
      promiseArr.map((promise) => {
        promise.then(
          (val) => {
            values.push(val);

            if (values.length === promiseArr.length) {
              resolve(values);
            }
          },
          (reason) => reject(reason)
        );
      });
    });
  }

10.静态race方法 不管是resolve还是reject谁先调用就执行谁 只会执行第一个成功的

 static race(promiseArr) {
    return new MyPromise((resolve, reject) => {
      promiseArr.map((promise) => {
        promise.then(
          (val) => resolve(val),
          (reason) => reject(reason)
        );
      });
    });
  }

结尾附上完整版代码,为了测试不和原生的Promise名字冲突,此处名字用MyPromise。

class MyPromise {
  static PENDING = 'pending';
  static FULFILLED = 'fulfilled';
  static REJECTED = 'rejected';

  constructor(executer) {
    //初始状态
    this.status = MyPromise.PENDING;
    //初始值
    this.value = null;
    //等待状态成功和失败函数暂时存放起来
    this.callbacks = [];

    //传入的函数 resolve 和 reject参数
    try {
      executer(this.resolve.bind(this), this.reject.bind(this));
    } catch (error) {
      this.reject.bind(this, error);
    }
  }

  resolve(val) {
    //只有pending状态才会改变
    if (this.status === MyPromise.PENDING) {
      this.status = MyPromise.FULFILLED;
      this.value = val;

      //多次触发then和异步处理方案
      setTimeout(() => {
        this.callbacks.map((callback) => {
          callback.onFulfilled(val);
        });
      });
    }
  }

  reject(reason) {
    //只有pending状态才会改变
    if (this.status === MyPromise.PENDING) {
      this.status = MyPromise.REJECTED;
      this.value = reason;

      //多次触发then和异步处理方案
      setTimeout(() => {
        this.callbacks.map((callback) => {
          callback.onReject(reason);
        });
      });
    }
  }

  then(
    onFulfilled = (val) => val,
    onReject = (reason) => {
      throw reason;
    }
  ) {
    const promise = new MyPromise((resolve, reject) => {
      switch (this.status) {
        //等待状态
        case MyPromise.PENDING:
          this.callbacks.push({
            onFulfilled: (val) => {
              try {
                const res = onFulfilled(val);
                this.resolvePromise(promise, res, resolve, reject);
              } catch (error) {
                reject(error);
              }
            },
            onReject: (reason) => {
              try {
                const res = onReject(reason);
                this.resolvePromise(promise, res, resolve, reject);
              } catch (error) {
                reject(error);
              }
            },
          });
          break;

        //成功状态
        case MyPromise.FULFILLED:
          //异步执行 替代微任务
          setTimeout(() => {
            try {
              const res = onFulfilled(this.value);
              this.resolvePromise(promise, res, resolve, reject);
            } catch (error) {
              reject(error);
            }
          });

          break;
        //失败状态
        case MyPromise.REJECTED:
          //异步执行 替代微任务
          setTimeout(() => {
            try {
              const resErr = onReject(this.value);
              //这里注意 上一步的是reject状态 下一个链式then接收结果是resolve接收
              resolve(resErr);
            } catch (error) {
              reject(error);
            }
          });
          break;
      }
    });
    //返回一个promise实例
    return promise;
  }

  //返回失败的结果
  catch(onReject) {
    return this.then(undefined, onReject);
  }

  //成功和失败都会执行
  finally(callback) {
    return this.then(
      (val) => {
        return MyPromise.resolve(callback()).then(() => val);
      },
      (reason) => {
        return MyPromise.resolve(callback()).then(() => reason);
      }
    );
  }

  //then核心代码复用逻辑
  resolvePromise(p, res, resolve, reject) {
    //不能重复传入同一个Promise
    if (p === res) throw new TypeError('Chaining cycle detected');

    try {
      // 返回结果是一个promise对象 那么直接调用then
      if (res instanceof MyPromise) {
        res.then(
          (val) => resolve(val),
          (reason) => reject(reason)
        );
      } else {
        resolve(res);
      }
    } catch (error) {
      reject(error);
    }
  }

  //静态resolve 返回一个promise 执行resolve方法
  static resolve(val) {
    return new MyPromise((resolve, reject) => {
      if (val instanceof MyPromise) {
        val.then(resolve, reject);
      } else {
        resolve(val);
      }
    });
  }

  //静态resolve 返回一个promise 执行reject方法
  static reject(reason) {
    return new MyPromise((resolve, reject) => {
      reject(reason);
    });
  }

  /* 
    Promise.all和Promise.race的实现原理：
    Promise.all 原理：当传入的数组每一个promise调用结果状态都是成功,那么返回一个数组包含入参返回值
    Promise.race 原理：当传入的数组每一个promise调用,返回值由最快改变状态的Promise决定
  */
  //静态all方法 数组所有promise都请求成功才返回resolve 有一个失败就直接reject返回
  static all(promiseArr) {
    const values = [];

    return new MyPromise((resolve, reject) => {
      promiseArr.map((promise) => {
        promise.then(
          (val) => {
            values.push(val);

            if (values.length === promiseArr.length) {
              resolve(values);
            }
          },
          (reason) => reject(reason)
        );
      });
    });
  }
  //静态race方法 不管是resolve还是reject谁先调用就执行谁 只会执行第一个成功的
  static race(promiseArr) {
    return new MyPromise((resolve, reject) => {
      promiseArr.map((promise) => {
        promise.then(
          (val) => resolve(val),
          (reason) => reject(reason)
        );
      });
    });
  }
}
追逐梦想之路_随笔
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
promise详解，手动实现以及上万字笔记.rar
08-16
创建Promise对象时，需要传入一个执行器函数，该函数接收两个参数：`resolve`和`reject`，它们分别是改变Promise状态的方法。 3. **Promise.prototype.then**： 是Promise的核心方法，用于注册成功和失败的回调。...
promise的三种状态及.then() .catch() .finally() .all() .race()的使用
wxiao_xiao_miao的博客
09-18 6024
Promise是ES6提出的一个新语法，用来优化异步代码的写法，是前端领域里的必会内容。 1.Promise的基本使用 1.1promise的三种状态 初始态pending：创建Promise对象时，且没有调用resolve或者是reject方法，相当于是初始状态。这个初始状态会随着你调用resolve，或者是reject函数而切换到另一种状态。 let p = new Promise((ok,err)=>{ console.info('发呆.....' )}) console.dir(p)
Promise学习
weixin_42351895的博客
08-22 386
Promise 特点： 1、对象状态不受外界影响（pedding进行中、fulfilled已成功、rejected以失败） 2、一旦转跳发生给吧，就不会再变，任何时候都可以拿到这个结果。Promise对象状态改变只有两种 pending -> fulfilled 或 pending -> rejected 只要发生这两种改变，状态就会凝固，此时称之为resolved（已成型） Promise新建后立刻执行指定的内容，等宏任务执行完后再将then存放到微任务的Event Queue中等待
Promise中的finally、all、race方法
qq_53848768的博客
10-24 1082
这两天看了一些关于Promise的内容，记录并总结一下学习内容 Promise.prototype.finally 该方法接收一个onFinally处理程序作为参数，不同于then和catch方法，该方法不关心最后落定成什么状态，只要状态由默认状态落定成功状态或失败状态，该处理程序都会执行。该方法不关心最后的结果，所以onFinally处理程序不接受参数， let promise = new Promise((res, rej) => { setTimeout(() => {
你以为接口返回的参数是res,在.then（）里打印出来就是res了吗。。并不一定
weixin_43811713的博客
10-28 6113
佛了，小菜鸡（本人）看啥都是玄学，大神看啥都觉得小孩(sha)子(zi)问题，，，【这是算是变量存储的问题吧，有兴趣继续看】 形容一下今天遇到的坑吧 有一个接口，这是接口返回的res 我很正常的将data的值赋予给自定义的变量，发现变量值跟返回值对不上，于是console了返回值 看到那个大大的console了吗，它输出是这样的 各位在看的大佬们有没觉得开始玄学了，反正我是重启项目，刷新浏览器，清理缓存一系列操作之后，再过来看依然是这样，，，莫名其妙，万圣节就快来了，背后凉嗖嗖的，本着相信科学，叫来
【手写 Promise 源码】第十一篇 - Promise.all 的实现
BraveWangDev
01-31 1395
本篇，主要实现 Promise 的核心静态 API（类方法）：Promise.all，主要涉及以下几个点：1，测试原生 Promise.all 的使用；2，Promise.all 的功能与特性分析；3，Promise.all 的源码实现、执行分析、功能测试；
js代码-手动实现一个 Promise
07-16
在实际开发中，Promise还有更多特性，如静态方法`Promise.resolve()`、`Promise.reject()`、`Promise.all()`、`Promise.race()`等，以及async/await语法的支持。但这个手动实现的版本足以帮助我们理解Promise的基本...
js代码-实现个Promise
07-15
Promise的完整实现还包括处理错误捕获（catch方法）、链式调用的正确终止（finally方法）以及Promise.all和Promise.race等高级特性。通过这种方式，我们可以更好地控制异步操作的流程，使得代码更加清晰和易于维护。
js代码-Promise实现
07-14
Promise的链式调用是其一大特色，通过`.then()`和`.catch()`方法可以处理异步操作的结果： ```javascript promise .then(function(result) { // 处理成功情况 console.log(result); }) .catch(function(error)...
js代码-实现一个基本的Promise
07-14
但是，为了与原生Promise保持一致，我们还需要实现catch、finally、all、race等方法。不过，以上代码已经足够理解Promise的基本工作原理。 在`main.js`文件中，你可以测试这个自定义Promise，比如： ```javascript...
Promise
每天都要努力学习哦~~
11-14 5585
Promise是什么? Promise：承诺者模式，它是ES6新增的一个内置类，基于Promise可以有效管理“异步编程”，避免回调地狱 从语法上来说promise是一个构造函数 从功能上来说promise对象来封装一个异步操作,并可获取其成功/失败的结果值 什么是回调地狱? JQ中的ajax管理，是基于回调函数的方式管理的「请求成功后，会触发success回调函数执行，result就是本次请求获取的结果」；如果我们想实现ajax串行，需要把下一个请求发送，放在上一个请求成功的回调函数中处理，.
1.①Promise(内是executor回调，两个函数参数resolve和reject)then值value和reason②catch只输出失败reason③all正确数组和race④封装ajax
lazylYYY的博客
09-25 1107
一：准备：函数对象与实例对象 1.函数对象：将函数作为对象使用时，简称为函数对象。 有个注意事项：name不能修改是函数对象不可修改的属性 2.实例对象：new构造函数或类产生的对象，我们称之为实例对象。 ...
前端笔记Vue项目day4(八）
czbkzmj的博客
09-18 543
async和 await async作为一个关键字放到函数前面 任何一个async函数都会隐式返回一个promise await关键字只能在使用async定义的函数中使用 ​ await后面可以直接跟一个 Promise实例对象 ​ await函数不能单独使用 async/await 让异步代码看起来...
Promise.all()、Promise.race()和Promise.finally()
weixin_39342847的博客
08-01 1432
Promise.all() Promise.all接收一个可迭代对象（比如数组），并返回一个Promise对象。当可迭代对象中的所有Promise都fulfilled后，就能在.then()中调用它们的结果。如果有一个或多个Promise对象rejected，就会可以在.catch()中得到第一个rejected的结果。 举个例子： var p1 = Promise.resolve(3); var p2 = 1337; var p3 = new Promise((resolve, reject) =>
Promise的九大方法(resolve、reject、then、catch、finally、all、allSettled、race、any)你都用过那些？
小墨鱼的前端问题录
07-13 725
定期复盘---今天我们来复习一下 Promise 的几个方法，分别是：Promise.resolve、Promise.reject、Promise.then、Promise.catch、Promise.finally、Promise.all、Promise.allSettled、Promise.race、Promise.any；Promise.allSettled()的入参和Promise.all、Promise.race一样，接受一个promise 对象的数组作为参数,也是同时开始、并行执行的。
Promise.resolve()的应用场景
weixin_43904993的博客
05-12 1140
需求：在一个列表页上方有筛选条件，通过选择类型搜索，有一个按钮点击打开弹框出现添加类型，添加完后列表页上方的类型list改变（条件：类型不能重复） 分析：既然过滤条件里面有列表，我们一开始就通过接口获取列表（或者点击下拉的时候调用，我们这里不做这么细），添加的时候不能重复即要对比之前的数据（这里要拿到最新的列表数据） <el-select class="from-box-input" placeholder="报告类型" filterable size="mini" clearable.
Promise初步详解（resolve，reject，catch
CC酱写前端的博客
07-05 894
promise
JavaScript系列之Promise的resolve、reject、then、catch
老__L的博客
09-28 3450
Promise是ES6异步编程的一种解决方案(目前最先进的解决方案是async和await的搭配（ES8)，但是她们是基于Promise的），从语法上讲，Promise是一个对象或者说是构造函数，用来封装异步操作并可以获取其成功或失败的结果。Promise 构造器主要用于包装不支持 Promise（返回值不是 Promise）的函数。then() 方法返回一个 Promise。它最多需要有两个参数：Promise 的成功和失败情况的回调函数。catch() 方法返回一个Promise ，并且处理拒绝的情况。
promise相关方法
最新发布
06-13
5. **`.all(arrayOfPromises)`** 和 **`.race(arrayOfPromises)`**：前者等待所有 Promise 全部成功后返回结果数组，后者则返回第一个完成的 Promise 结果。 6. **`Promise.resolve(value)`** 和 **`Promise.reject...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

追逐梦想之路_随笔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值