手写Promise then/catch/resolve/reject all/allSetteld

最新推荐文章于 2024-07-12 16:08:50 发布
最新推荐文章于 2024-07-12 16:08:50 发布
阅读量591 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RollsRoycewk/article/details/109582529
版权

原生

    <script>
      const promise = new Promise((resolve, reject) => {
        resolve();
        // reject();
      });

      console.log(promise);
    </script>

//Promise是一个构造函数
//参数为一个函数，且同步自调用了（这里称它为executor）
//executor中传入了两个函数，分别是resolve和reject，用来改变promise的状态
//promise的初始状态为pending
//promise的状态只能修改一次

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

MyPromise.prototype

实现resolve/reject

(function (w) {
  function MyPromise(executor) {
    // promise对象就是this,这是因为new关键字作用
    const that = this;
    /* 
        初始化promise对象是pending状态
        _开头的属性是私有属性,外界不允许操作
    */
    that._status = "pending";

    // resolve函数将promise对象状态改成resolved
    function resolve() {
      // 让promise对象状态只能修改一次
      if (that._status !== "pending") return;
      // 如果不用that,这里的this指向是有问题的
      that._status = "resolved";
    }

    // reject函数将promise对象状态改成rejected
    function reject() {
      if (that._status !== "pending") return;
      that._status = "rejected";
    }
    // 同步调用
    executor(resolve, reject);
  }
  w.MyPromise = MyPromise;
})(window);
  • html
  <body>
    <script src="./01.promise.js"></script>
    <script>
      const promise = new MyPromise((resolve, reject) => {
        resolve();
        // reject()
      });
      console.log(promise);
    </script>
  </body>

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

实现then方法–基础

promise.then(
(value) => { },
(reason) => { }
)
1.then方法是promise实例对象使用的，所以定义在原型上
2.then方法是同步执行的
3.第一个参数是成功的回调，第二个参数是失败的回调
4.回调中可以接收到promise的结果值

  • 当原型添加了then方法时，会将onResolve和onReject通过this传到promise实例对象身上
  • 而在MyPromise构造函数中，通过that（这里替换了this，也是指向promsie实例对象）拿到这两个方法，在resolve和reject中调用
  • onResolve和onReject都是异步函数
(function (w) {
  function MyPromise(executor) {
    const that = this;
    that._status = "pending";
    // 用来存储成功/失败回调函数的容器
    that._callbacks = {};

    function resolve(value) {
      if (that._status !== "pending") return;
      that._status = "resolved";
      // 触发和调用onResolved函数,切记这里要异步去调用,因为代码同步执行的,这个时候原型上还没有添加这些方法
      setTimeout(() => {
        // that._callbacks.onResolved && that._callbacks.onResolved(value);

        // 这个和上面的写法一样,但是是ES11的语法,2020年  新的运算符?.可选链
        that._callbacks.onResolved?.(value);
      }, 0);
    }
    function reject(error) {
      if (that._status !== "pending") return;
      that._status = "rejected";
      // 如果不用定时器,这样子也可以
      that._callbacks.onRejected && that._callbacks.onRejected(error);
    }

    executor(resolve, reject);
  }

  MyPromise.prototype.then = function (onResolved, onRejected) {
    /* 
      this指向实例对象promise
      将成功/失败回调添加到容器中(注意没有调用,只是去添加这个属性,在调用回调的时候执行)
      在Promise原型上添加then方法,方法中也是两个函数作为参数，分别是成功的回调和失败的回调
    */
    this._callbacks.onResolved = onResolved;
    this._callbacks.onRejected = onRejected;
  };
  w.MyPromise = MyPromise;
})(window);


  <body>
    <script src="./01.promise.js"></script>
    <script>
      const promise = new MyPromise((resolve, reject) => {
        resolve(123);
        // reject(777);
      });
      console.log(promise);

      promise.then(
        (value) => {
          console.log("then方法成功回调---->" + value);
        },
        (error) => {
          console.log("then方法失败回调---->" + error);
        }
      );
    </script>
  </body>

在这里插入图片描述

在这里插入图片描述

  • 没有解决异步
    在这里插入图片描述

then方法返回值/三种

  • 调用then方法需要返回一个promise对象
  • 因为promise的状态只能改变一次，所以我们需要返回一个新的promise对象
    1.当then方法没有返回值，或者有返回值但不是promise对象时，默认返回一个新的成功的promise对象
    2.当then方法返回一个promise对象需要判断是成功还是失败的peomsie对象
    3.当then方法调用时，内部报错，需要返回一个失败的peomise对象
(function (w) {
  function MyPromise(executor) {
    const that = this;
    that._status = "pending";
    // 定义promise默认返回值
    that._result = undefined;
    that._callbacks = {};

    function resolve(value) {
      if (that._status !== "pending") return;
      that._status = "resolved";
      // 修改promise的返回值
      that._result = value;
      setTimeout(() => {
        that._callbacks.onResolved?.(value);
      });
    }

    function reject(error) {
      if (that._status !== "pending") return;
      that._status = "rejected";
      // 修改promise的返回值
      that._result = error;
      setTimeout(() => {
        that._callbacks.onRejected && that._callbacks.onRejected(error);
      });
    }
    executor(resolve, reject);
  }

  MyPromise.prototype.then = function (onResolved, onRejected) {
    const that = this;
    // 调用then方法,返回一个新的promise对象,这样才能实现then方法的链式调用
    return new MyPromise((resolve, reject) => {
      // then的返回值,取决于内部函数的返回值,怎么拿到这个函数内部返回值呢?小技巧
      that._callbacks.onResolved = function (value) {
        const resolvedRES = onResolved(value);
        // 如果res的隐式原型在MyP的显示原型上,其实就是确认是peomise实例
        if (resolvedRES instanceof MyPromise) {
          resolvedRES.then(resolve, reject);
          /* 
            实际这个是这样的简写
            result.then(
              (value) => resolve(value),
              (reason) => reject(reason)
            );
           */
        } else {
          // 说明没有返回值或者返回值不是promise
          resolve(resolvedRES);
        }
      };
      // 其实和resolve返回机制一样
      this._callbacks.onRejected = function (error) {
        const rejectedRES = onRejected(error);
        if (rejectedRES instanceof MyPromise) {
          rejectedRES.then(resolve, reject);
        } else {
          resolve(rejectedRES);
        }
      };
    });
  };
  w.MyPromise = MyPromise;
})(window);
  • html
  <body>
    <script src="./02.promise.js"></script>
    <script>
      const promise = new MyPromise((resolve, reject) => {
        // resolve(123);
        reject(777);
      });
      console.log(promise);

      promise
        .then(
          (value) => {
            console.log("then方法成功回调---->" + value);
          },
          (error) => {
            return 50765
            console.log("then方法失败回调---->" + error);
            
          }
        )
        .then(
          (value) => {
            console.log("then2方法成功回调---->" + value);
          },
          (error) => {
            console.log("then2方法失败回调---->" + error);
          }
        );
    </script>
  </body>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

then方法返回值报错解决

  • 就是在上面代码加了try catch而已
(function (w) {
  function MyPromise(executor) {
    const that = this;
    that._status = "pending";
    that._result = undefined;
    that._callbacks = {};

    function resolve(value) {
      if (that._status !== "pending") return;
      that._status = "resolved";
      that._result = value;
      setTimeout(() => {
        that._callbacks.onResolved?.(value);
      });
    }

    function reject(error) {
      if (that._status !== "pending") return;
      that._status = "rejected";
      that._result = error;
      setTimeout(() => {
        that._callbacks.onRejected && that._callbacks.onRejected(error);
      });
    }
    executor(resolve, reject);
  }

  MyPromise.prototype.then = function (onResolved, onRejected) {
    const that = this;
    return new MyPromise((resolve, reject) => {
      that._callbacks.onResolved = function (value) {
        // 加入了try tach
        try {
          const resolvedRES = onResolved(value);
          if (resolvedRES instanceof MyPromise) {
            resolvedRES.then(resolve, reject);
          } else {
            resolve(resolvedRES);
          }
        } catch (error) {
          reject(error);
        }
      };
      this._callbacks.onRejected = function (error) {
        try {
          const rejectedRES = onRejected(error);
          if (rejectedRES instanceof MyPromise) {
            rejectedRES.then(resolve, reject);
          } else {
            resolve(rejectedRES);
          }
        } catch (error) {
          reject(error);
        }
      };
    });
  };
  w.MyPromise = MyPromise;
})(window);

在这里插入图片描述

实现catch

  • 借用then方法功能
  // 在then方法函数中结局catch的报错
      // // 为了then方法不传第二个函数（失败回调）服务
    onRejected =
      typeof onRejected === "function"
        ? onRejected
        : (error) => {
            throw error;
          };
    //  为了catch方法不传第一个回调服务
    onResolved =
      typeof onResolved === "function" ? onResolved : (value) => value;



  // catch实际就是借用了then的方法
  MyPromise.prototype.catch = function (onRejected) {
    return this.then(undefined, onRejected);
  };
  • 不带try catch的报错
    在这里插入图片描述
    在这里插入图片描述
  • 带try catch的报错
    在这里插入图片描述
   <body>
    <script src="./02.promise.js"></script>
    <script>
      const promise = new MyPromise((resolve, reject) => {
        resolve ();
        // reject(777);
      });
      console.log(promise);

      promise
        .then((value) => {
          console.log(11111, value);
        })
        // catch还是会执行,匹配的时候上一次是成功的,然后catch接收这个成功promise,是undefined,调用onResulved调用resolve报错
        .catch((err) => {
          console.log(22222, err);
        })
        .then((value) => {
          console.log(33333, value);
        })
        .catch((reason) => {
          console.log(4444, reason);
        });

    </script>
  </body>
  • 解决之后不会有报错
    在这里插入图片描述

MyPromise方法:

resolve

  // 给promise添加一个resolve方法
  MyPromise.resolve = function (value) {
    if (val instanceof MyPromise) {
      return value;
    }
    return new MyPromise((resolve) => resolve(value));
  };

reject

  // 给promise添加一个reject方法
  MyPromise.reject = function (reason) {
    return new MyPromise((resolve, reject) => reject(reason));
  };

all

  • 优化版
  // all方法所有成功返回成功promise,有一个失败返回失败promise,失败的值就是第一个失败的值
  MyPromise.all = function (promises) {
    // 定义一个数组,用来保存成功的promise
    const result = [];
    // 传入数组的长度
    const total = promises.length;
    // 已经完成的数量
    let completeNum = 0;
    // 调用all方法会返回一个新的promise,all方法接收一个数组
    return new MyPromise((resolve, reject) => {
      // 去遍历这个传入的数组
      promises.forEach((item, index) => {
        if (item instanceof MyPromise) {
          item.then(
            (value) => {
              // result[index] = value;
              // completeNum++;
              // if (total === completeNum) {
              //   resolve(result);
              // }
              Common(index, value);
            },
            // 这个方法是简写,完整版见下面
            reject
          );
        } else {
          // result[index] = item;
          // completeNum++;
          // if (total === completeNum) {
          //   resolve(result);
          // }
          Common(index, item);
        }
      });
      // 不能定义在forEach 否则每次都会创建这个函数
      function Common(index, value) {
        result[index] = value;
        completeNum++;
        if (total === completeNum) {
          resolve(result);
        }
      }
    });
  };
  • 基础版
  // all方法所有成功返回成功promise,有一个失败返回失败promise,失败的值就是第一个失败的值
  MyPromise.all = function (promises) {
    // 定义一个数组,用来保存成功的promise
    const result = [];
    // 传入数组的长度
    const total = promises.length;
    // 已经完成的数量
    let completeNum = 0;
    // 调用all方法会返回一个新的promise,all方法接收一个数组
    return new MyPromise((resolve, reject) => {
      // 去遍历这个传入的数组
      promises.forEach((item, index) => {
        if (item instanceof MyPromise) {
          item.then(
            (value) => {
              result[index] = value;
              completeNum++;
              if (total === completeNum) {
                resolve(result);
              }
            },
            (reason) => reject(reason)
          );
        } else {
          result[index] = item;
          completeNum++;
          if (total === completeNum) {
            resolve(result);
          }
        }
      });
    });
  };


      // 注意这里要写自定义的promise,否则不会进入判断,直接renturn这个promise到数组
      const p = new MyPromise((resolve) => resolve(777));
      // const f = new MyPromise((resolve, reject) => reject(9999));
      const res = MyPromise.all([111, 222, 333,p]);
      console.log(res)

在这里插入图片描述
在这里插入图片描述

allSetteld

  /* 
    只要里边的promise对象没有执行完成，则allSettled返回pending状态的promise对象
    只要里边的promise对象全部完成了，则allSettled返回fulfilled状态的promise对象（无论是否所有的promise都失败了）
    当所有的请求完成，allSettled的状态值就是成功，allSettled的value就是一个数组，包含了所有的方法内返回promise对象
  */
  MyPromise.allSetteld = function (promises) {
    // 调用allSetteld方法,返回一个promise
    return new MyPromise((resolve) => {
      // 声明一个数组,保存成功的值
      const result = [];
      // 得到传入数组的数量
      const total = promises.length;
      // 已经完成的数量
      let completeNum = 0;

      promises.forEach((item, index) => {
        if (item instanceof MyPromise) {
          item.then(
            (value) => {
              result[index] = {
                status: "resolved",
                value,
              };
              completeNum++;
              if (total === completeNum) {
                resolve(result);
              }
            },
            (reason) => {
              result[index] = {
                state: "rejected",
                reason,
              };
              completeNum++;
              if (total === completeNum) {
                resolve(result);
              }
            }
          );
        } else {
          result[index] = {
            state: "resolved",
            value: item,
          };
          completeNum++;
          if (total === completeNum) {
            resolve(result);
          }
        }
      });
    });
  };


      const p = new MyPromise((resolve) => {
        setTimeout(() => {  
          resolve(777);
        }, 2000);
      });
      const f = new MyPromise((resolve, reject) => reject(9999));
      const res = MyPromise.allSetteld([111, 222, 333, p, f]);
      console.log(res);

      setTimeout(()=>{
        console.log(res)
      },3000)

在这里插入图片描述

探鱼不是鱼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
手写Promise - 实例方法catch、finally
willemwei023的博客
07-17 764
手写Promise - 实现一个基础的Promise 手写Promise - 实例方法catch、finally 手写Promise - 常用静态方法all、any、resolve、reject、race 上一篇文章手写了一个基础的Promise，我们继续来完善它，为其添加经常用到的catch和finally方法 catch & finally catch() 方法返回一个Promise，并且处理拒绝的情况。我们知道then方法的第二个参数其实就是干这个用的，catch只是一个别名。 finally
自己使用ES6 class类，手写一个Promise类，实现原型方法then/catch/finally，实现静态方法resolve/reject/all/race。
青山不改，绿水长流。
08-28 211
好了本篇文章就到这里了，喜欢的话可以关注我，会持续更新的，有错误欢迎大家指出，大家可以在我这里互相讨论学习，一起进步。青山不改 绿水长流 我们下篇文章见😋。
手写Promise（原生Promise剖析四 - - catch方法封装 - -（异常穿透））
weixin_46886227的博客
01-07 990
首先，对于这个catch方法来说，是很简单的，因为它只帮我们做了一件事，那就是调用失败的回调，如下: let p1 = new Promise((resolve, reject) => { reject("Oh no") }) p1.then(value => { console.log("ok") }).then(value => { consol
手写Promise特性全解析，手把手实现（二）
最新发布
前端探索者
07-12 1164
通过本系列文章的深入探索，我们从零开始，一步步构建了对 Promise 机制的理解，实现了一个基本的 Promise 构造函数，并逐步扩展了它的功能，包括 then、catch、all、race 和 allSettled 等高级 API。这个过程不仅加深了我们对异步编程模式的认识，也锻炼了我们解决实际编程问题的能力。
手写Promise函数之resolve、reject与catch
youhebuke225的博客
02-16 147
我们这次书写主要是满足第二种用法。
手写Promise.resolve,Promise.reject, Promise.all
qiansitong的博客
07-07 200
Promise
手写Promise_2_catch()方法_异常穿透_值传递
爱学习的小强
10-17 160
文章目录catch() catch()
all方法 手写promise_手写Promise - 常用静态方法all、resolve、reject、race
weixin_36315079的博客
12-30 267
先来回顾一下，上一章节之后的代码。class WPromise {static pending = 'pending';static fulfilled = 'fulfilled';static rejected = 'rejected';constructor(executor) {this.status = WPromise.pending; // 初始化状态为pendingthis.valu...
手写Promise - 常用静态方法all、resolve、reject、race
willemwei023的博客
07-26 549
手写Promise - 实现一个基础的Promise 手写Promise - 实例方法catch、finally 手写Promise - 常用静态方法all、resolve、reject、race 先来回顾一下，上一章节之后的代码。 class WPromise { static pending = 'pending'; static fulfilled = 'fulfilled'; static rejected = 'rejected'; constructor(executor) { t
Promise_js手写promise_js手写Promise_手写Promise_JS手写Promise_
09-30
x.then(resolve, reject); } else { resolve(x); } } catch (error) { reject(error); } } // 如果当前Promise是rejected状态 if (this.status === 'rejected') { try { // 调用onRejected处理错误 let...
手把手一行一行代码教你“手写Promise“，完美通过 Promises/A+ 官方872个测试用例
圆圆的 JavaScript 博客
12-20 1699
保姆级教程，看完还不懂的私聊我亲自教！
Promise.allSettled方法
qq_44675204的博客
08-10 1504
Promise.allSettled方法是ES2020新增的特性，可以执行多个Promise对象，获取多个Promise状态。相比于Promise的all方法，可以获取成功或失败的所有状态，因为Promise的all方法遇到一个rejected就会立即停止。 let p1 = new Promise((res) => { setTimeout(()=>{ res('P1'); }, 1000) }) let p2 = new Promise((res,rej) =
es6 --- > 手写一个promise
栗子好好吃的博客
06-25 633
一个promise实例: var getJSON = function(url) { var promise = new Promise(function(resolve, reject) { // XHR对象发现ajax请求 var client = new XMLHttpReqeust(); client.open("GET", url)...
es6 --- > Promise.catch
栗子好好吃的博客
04-25 727
Promise.prototype.catch(): 是.then(null, rejection)的别名,用于指定发生错误时的回调函数 p.then( (val) -> console.log('fulfilled:', val)) .catch( (err) => console.log('rejected', err)); // 等同于 p.then( (val) =>...
手写promise原理系列一：promise基础知识解析，then、catch、resolve、reject、all、race等promise api的用法
ThisEqualThis的博客
03-12 628
开篇点题，最近复习了前端技术点中有关 promise 的相关知识，但是还从未深入过源码，从未手写过 promise，项目中已经全面使用 promise 作为异步编程的解决方式，避免了回调地狱。为了深入理解 promise 的工作原理，决定写一个关于"手写promise"的系列教程，希望自己能坚持写完，不要半途而废。。好了，话不多说，先来熟悉一下 promise 的基础知识。
Promise对象的方法：then、catch、all、race
qq_53606349的博客
09-26 223
Promise.all方法接收一个promise数组作为参数，返回一个promise，当参数的数组中的所有promise都resolve时候，返回的promise才会resolve；Promise.all方法返回的promise的then的第一个参数onFullfilled回调的参数也是一个数组，对应参数中的数组promise resolve的结果。无论onFullfilled中还是onRejected中，返回一个promise对象，则以该promise的任务和状态返回新的promise。
手动实现Promise、Promise.All、Promise.AllSettled
MichelleZhai的博客
07-11 357
PromisePromise原理promise有两个特点手动实现Promise（Class vs ES5）手动实现promise.all手动实现promiseAllSettled 最近在整理promise的一些知识点，以前看的太浅，如今再去理解又是另外一种感觉，废话就不多说了，直接上原理 Promise原理 promise函数是ES6里的一部分，new promise对象，promise其实也是一个构造函数，自身有reject、resolve、race方法，原型链上有then、catch方法。用new出来一
Promise的九大方法(resolve、reject、then、catch、finally、all、allSettled、race、any)你都用过那些？
热门推荐
程邓楠的博客
11-17 5万+
前言： 定期复盘---今天我们来复习一下 Promise 的几个方法，分别是：Promise.resolve、Promise.reject、Promise.then、Promise.catch、Promise.finally、Promise.all、Promise.allSettled、Promise.race、Promise.any； 接下来我们一起去看看吧，从深处去了解他们有什么区别！！！
手写Promise/A+，通过872个测试用例解析异步实现
理解并手写Promise有助于开发者深入理解异步编程，提高代码质量，同时也能在面试中展现出对现代JavaScript特性的掌握。通过阅读和实现Promise/A+规范，我们可以更好地理解和应用Promise，从而在复杂的异步场景中编写...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值