Promise手写 使用class方法

最新推荐文章于 2023-02-09 08:00:20 发布
最新推荐文章于 2023-02-09 08:00:20 发布
阅读量717 收藏 2
点赞数 1
分类专栏： js源码解析 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/young_sam/article/details/122489305
版权

原来使用Promise

用法不再多说，只是展示比较跟我下面写的使用方法

var p = new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve(4)
    }, 0)
})
p.then((res)=>{
    //4 res
    console.log(res, 'res')
})

const p = new Promise((resolve, reject) => {
  setTimeout(() => {
    // resolve(4);
    // eslint-disable-next-line prefer-promise-reject-errors
    reject(4);
  }, 0);
});
p.then(
  (res) => {
    console.log(res, 'res');
  },
  (err) => {
    // 4  err
    console.log(err, 'err');
  },
);

const p = new Promise((resolve, reject) => {
  setTimeout(() => {
    // resolve(4);
    // eslint-disable-next-line prefer-promise-reject-errors
    reject(4);
  }, 0);
});
p.then((res) => {
  console.log(res, 'res');
}).catch((e) => {
  // 4
  console.log(e);
});

我们这里可以看到如果写入then第二个参数后，可以处理reject的值，也可以通过catch来处理reject的值

手写Promise

  1. 创建一个class 对象 新增构建函数
class MyPromise {
  public constructor(fn: (resolve: (value: unknown) => void) => void) {
    // 成功
    const resolve = (value: unknown) => {
      console.log(value);
    };

    fn(resolve);
  }
}

const a = new MyPromise((resolve) => {
  resolve('123');
  /** 123 */
});

这样我们创建一个类，具有回调对象里面函数的方法。

  1. 新增状态，执行返回值，拒绝返回值
const PENDING = 'pending'; // 等待中
const FULFILLED = 'fulfilled'; // 执行
const REJECTED = 'rejected'; // 拒绝

class MyPromise {
  /** 执行状态 */
  state = PENDING;
  /** 执行返回 */
  value: any = null;
  /** 失败返回 */
  reason: any = null;
  public constructor(
    fn: (resolve: (value: unknown) => void, reject: (reason: unknown) => void) => void,
  ) {
    const resolve = (value: unknown) => {
      // state改变,resolve调用就会失败
      if (this.state === 'pending') {
        // resolve调用后，state转化为成功态
        this.state = 'fulfilled';
        // 储存成功的值
        this.value = value;
        console.log(value);
      }
    };
    const reject = (reason: unknown) => {
      // state改变,reject调用就会失败
      if (this.state === 'pending') {
        // reject调用后，state转化为失败态
        this.state = 'rejected';
        // 储存失败的原因
        this.reason = reason;
      }
    };
    // 如果executor执行报错，直接执行reject
    try {
      fn(resolve, reject);
    } catch (err) {
      reject(err);
    }
  }
}

const a = new MyPromise((resolve) => {
  resolve('123');
  /** 123 */
});

现在跟Promise 使用方法还差一个then方法进行回调resolve方法
3.

  • 秘籍规定:Promise有一个叫做then的方法，里面有两个参数：onFulfilled,onRejected,成功有成功的值，失败有失败的原因
  • 当状态state为fulfilled，则执行onFulfilled，传入this.value。当状态state为rejected，则执行onRejected，传入this.value
  • onFulfilled,onRejected如果他们是函数，则必须分别在fulfilled，rejected后被调用，value或reason依次作为他们的第一个参数。
  • 例子：以下是Promise，可以看得到resolve传进去就是4，这个值会传进then里面的res就是上面提到onFulfilled
var p = new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve(4)
    }, 0)
})
p.then((res)=>{
    //4 res
    console.log(res, 'res')
})
  • 回到为我们这边
const PENDING = 'pending'; // 等待中
const FULFILLED = 'fulfilled'; // 执行
const REJECTED = 'rejected'; // 拒绝

class MyPromise {
  /** 执行状态 */
  state = PENDING;
  /** 执行返回 */
  value: any = null;
  /** 失败返回 */
  reason: any = null;
  public constructor(
    fn: (resolve: (value: unknown) => void, reject: (reason: unknown) => void) => void,
  ) {
    const resolve = (value: unknown) => {
      // state改变,resolve调用就会失败
      if (this.state === 'pending') {
        // resolve调用后，state转化为成功态
        this.state = 'fulfilled';
        // 储存成功的值
        this.value = value;
      }
    };
    const reject = (reason: unknown) => {
      // state改变,reject调用就会失败
      if (this.state === 'pending') {
        // reject调用后，state转化为失败态
        this.state = 'rejected';
        // 储存失败的原因
        this.reason = reason;
      }
    };
    // 如果executor执行报错，直接执行reject
    try {
      fn(resolve, reject);
    } catch (err) {
      reject(err);
    }
  }

  // then 方法 有两个参数onFulfilled onRejected
  then(onFulfilled?: Function, onRejected?: Function) {
    // 状态为fulfilled，执行onFulfilled，传入成功的值
    if (onFulfilled && this.state === 'fulfilled') {
      onFulfilled(this.value);
    }
    // 状态为rejected，执行onRejected，传入失败的原因
    if (onRejected && this.state === 'rejected') {
      onRejected(this.reason);
    }
  }
}

const a = new MyPromise((resolve) => {
  resolve('123');
});

a.then((res: string) => {
  console.log(res);
  // 123
});
  1. 处理异步问题，现在基本可以实现简单的同步代码，但是当resolve在setTomeout内执行，then时state还是pending等待状态 我们就需要在then调用的时候，将成功和失败存到各自的数组，一旦reject或者resolve，就调用它们，优化一下代码
enum Status {
  PENDING = 'pending', // 等待中
  FULFILLED = 'fulfilled', // 执行
  REJECTED = 'rejected', // 拒绝
}

class MyPromise {
  /** 执行状态 */
  state: Status = Status.PENDING;
  /** 执行返回 */
  value: any = null;
  /** 失败返回 */
  reason: any = null;
  /** 成功存放的数组 */
  onResolvedCallbacks: Function[] = [];
  /** 失败存放法数组 */
  onRejectedCallbacks: Function[] = [];
  public constructor(
    fn: (resolve: (value: unknown) => void, reject: (reason: unknown) => void) => void,
  ) {
    const resolve = (value: unknown) => {
      // state改变,resolve调用就会失败
      if (this.state === Status.PENDING) {
        // resolve调用后，state转化为成功态
        this.state = Status.FULFILLED;
        // 储存成功的值
        this.value = value;
        // 一旦resolve执行，调用成功数组的函数
        this.onResolvedCallbacks.forEach((fn) => fn());
      }
    };
    const reject = (reason: unknown) => {
      // state改变,reject调用就会失败
      if (this.state === Status.PENDING) {
        // reject调用后，state转化为失败态
        this.state = Status.REJECTED;
        // 储存失败的原因
        this.reason = reason;
        // 一旦reject执行，调用失败数组的函数
        this.onRejectedCallbacks.forEach((fn) => fn());
      }
    };
    // 如果executor执行报错，直接执行reject
    try {
      fn(resolve, reject);
    } catch (err) {
      reject(err);
    }
  }

  // then 方法 有两个参数onFulfilled onRejected
  then(onFulfilled?: Function, onRejected?: Function) {
    if (this.state === Status.FULFILLED && onFulfilled) {
      onFulfilled(this.value);
    }
    if (this.state === Status.REJECTED && onRejected) {
      onRejected(this.reason);
    }
    // 当状态state为pending时
    if (this.state === Status.PENDING) {
      if (onFulfilled && typeof onFulfilled === 'function') {
        // onFulfilled传入到成功数组
        this.onResolvedCallbacks.push(() => {
          onFulfilled(this.value);
        });
      }

      if (onRejected && typeof onRejected === 'function') {
        // onRejected传入到失败数组
        this.onRejectedCallbacks.push(() => {
          onRejected(this.value);
        });
      }
    }
  }
}

const a = new MyPromise((resolve) => {
  setTimeout(() => {
    console.log('444');
    resolve('123');
  }, 500);
  console.log('333');
});

a.then((res: string) => {
  console.log(res);
});
// 333 444 123 最终结果
  1. 如果上面的逻辑已经看懂后，接下来要看最关键的链式结构,意思是多个then使用， new Promise().then().then() ,这就是链式调用，用来解决回调地狱。
  • 例子
const p = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(4);
    // eslint-disable-next-line prefer-promise-reject-errors
    // reject(4);
  }, 0);
});
p.then((res) => {
  // 4 res
  console.log(res, 'res');
  return res + 1;
}).then((res) => {
  // 5 res2
  console.log(res, 'res2');
});

  • 1、为了达成链式，我们默认在第一个then里返回一个promise。秘籍规定了一种方法，就是在then里面返回一个新的promise,称为promise2： promise2 = new Promise((resolve, reject)=>{})
    •将这个promise2返回的值传递到下一个then中
    •如果返回一个普通的值，则将普通的值传递给下一个then中

  • 2、当我们在第一个then中 return 了一个参数（参数未知，需判断）。这个return出来的新的promise就是onFulfilled()或onRejected()的值

  • 秘籍则规定onFulfilled()或onRejected()的值，即第一个then返回的值，叫做x，判断x的函数叫做resolvePromise

  • 回归我们代码


enum Status {
  PENDING = 'pending', // 等待中
  FULFILLED = 'fulfilled', // 执行
  REJECTED = 'rejected', // 拒绝
}
class MyPromise {
  /** 执行状态 */
  state: Status = Status.PENDING;
  /** 执行返回 */
  value: any = null;
  /** 失败返回 */
  reason: any = null;
  /** 成功存放的数组 */
  onResolvedCallbacks: Function[] = [];
  /** 失败存放法数组 */
  onRejectedCallbacks: Function[] = [];
  /** 构造方法 是一个方法，里面有2个传参，第一个是 resolve 是方法传参是 成功回调传参， 第二个是reject方法 里面的参数是失败回调 */
  public constructor(
    fn: (resolve: (value: unknown) => void, reject: (reason: unknown) => void) => void,
  ) {
    const resolve = (value: unknown) => {
      // state改变,resolve调用就会失败
      if (this.state === Status.PENDING) {
        // resolve调用后，state转化为成功态
        this.state = Status.FULFILLED;
        // 储存成功的值
        this.value = value;
        // 一旦resolve执行，调用成功数组的函数
        this.onResolvedCallbacks.forEach((fn) => fn());
      }
    };
    const reject = (reason: unknown) => {
      // state改变,reject调用就会失败
      if (this.state === Status.PENDING) {
        // reject调用后，state转化为失败态
        this.state = Status.REJECTED;
        // 储存失败的原因
        this.reason = reason;
        // 一旦reject执行，调用失败数组的函数
        this.onRejectedCallbacks.forEach((fn) => fn());
      }
    };
    // 如果executor执行报错，直接执行reject
    try {
      fn(resolve, reject);
    } catch (err) {
      reject(err);
    }
  }

  // then 方法 有两个参数onFulfilled 是指 then(res)的res  res 就是 resolve()传进去的值 onRejected
  then(onFulfilled?: Function, onRejected?: Function) {
    // 声明返回的promise2
    const promise2 = new MyPromise((resolve, reject) => {
      if (this.state === Status.FULFILLED && onFulfilled) {
        const x = onFulfilled(this.value);
        this.resolvePromise(promise2, x, resolve, reject);
      }
      if (this.state === Status.REJECTED && onRejected) {
        const x = onRejected(this.reason);
        this.resolvePromise(promise2, x, resolve, reject);
      }
      // 当状态state为pending时
      if (this.state === Status.PENDING) {
        if (onFulfilled && typeof onFulfilled === 'function') {
          // onFulfilled传入到成功数组
          this.onResolvedCallbacks.push(() => {
            const x = onFulfilled(this.value);
            this.resolvePromise(promise2, x, resolve, reject);
          });
        }

        if (onRejected && typeof onRejected === 'function') {
          // onRejected传入到失败数组
          this.onRejectedCallbacks.push(() => {
            const x = onRejected(this.value);
            this.resolvePromise(promise2, x, resolve, reject);
          });
        }
      }
    });
    return promise2;
  }

  resolvePromise(
    promise2: MyPromise,
    x: any,
    resolve: (value: unknown) => void,
    reject: (value: unknown) => void,
  ) {
    if (promise2 === x) {
      return reject(new TypeError('Chaining cycle detected for promise #<promise>'));
    }
    // 判断如果x是否是一个对象，判断函数是否是对象的方法有：typeof instanceof constructor toString
    if ((typeof x === 'object' && x != null) || typeof x === 'function') {
      try {
        const then = x.then; // 取then可以报错，报错就走reject()
        if (typeof then === 'function') {
          // 用then.call()为了避免在使用一次x.then报错
          then.call(
            x,
            (y: any) => {
              console.log('y', y);
              resolve(y); // 采用promise的成功结果，并且向下传递
            },
            (r: any) => {
              reject(r); // 采用promise的失败结果，并且向下传递
            },
          );
        } else {
          resolve(x); // x不是一个函数，是一个对象
        }
      } catch (err) {
        reject(err);
      }
    } else {
      // x是一个普通值
      resolve(x);
    }
  }
}

使用demo

new MyPromise((resolve) => {
  setTimeout(() => {
    console.log('开始');
    resolve('a');
  }, 500);
})
  .then((res: string) => {
    console.log(res);
    console.log('结束');
    return 'b';
  })
  .then((res: string) => {
    console.log(res);
  });

new Promise((resolve) => {
  resolve('a');
})
  .then((res: any) => {
    console.log(res);
    return 'b';
  })
  .then((res: string) => {
    console.log(res);
  });

结果都是一样的可以使用
在这里插入图片描述

Sam young
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用class手写实现完整的promise及其方法
weixin_43801836的博客
09-05 392
【代码】使用class手写实现完整的promise及其方法。
ESLint规则中的JavaScript知识
weixin_34278190的博客
07-24 394
网上关于ESLint的介绍，安装，配置和使用等文章已经有很多了，写的都很全面，还不清楚的同学可以先去简单了解一下，本文就不作介绍了。 本文的主要内容是通过ESLint的规则（Rules），从中学到 JavaScript 的基础知识。同时，提前了解这些规则的含义与理由，有助于在以后的开发中提前规避风险，提高代码质量。 以下是从官网的 Rules 列表中摘取的部分规则，欢迎大家补充，共同学习。 P...
Typescript 入门
Thinking_calculus的博客
01-16 757
Typescript 入门(LTS)
【Promise】Promise 使用 / 回调地狱问题 async-await /宏队列与微队列
one or only的博客
08-06 1243
【Promise】Promise 的使用 / 回调地狱问题 async-await /宏队列与微队列
Promise报错 Expected the Promise rejection reason to be an Error
sinat_26229211的博客
07-23 2万+
今天在使用promise的时候 getLyric() { if (this.lyric) { return Promise.resolve(this.lyric) } return new Promise((resolve, reject) =&gt; { getLyric(this.mid).then((res) =&gt; { ...
Feign原理解析（三）参数的处理
long9870的博客
10-17 1627
参数的处理 之前的章节提到过接口方法的解析，现在再看一下这个方法： public Map<String, MethodHandler> apply(Target key) { List<MethodMetadata> metadata = contract.parseAndValidatateMetadata(key.type()); Map...
JS手写一个自定义Promise操作示例
10-15
在面试中，经常会被要求手写一个简单的Promise实现来理解其工作原理。以下是一个基于class的自定义Promise（命名为MyPromise）的详细解释。 首先，`MyPromise`构造函数接收一个执行器函数`executor`作为参数。这个...
js代码-手写promise
07-14
// 在Promise中使用enqueueTask // ... ``` 通过以上步骤，我们已经实现了一个基本的Promise。然而，这只是一个简化版，实际的Promise实现还包括更复杂的功能，如链式调用的错误传播、多个Promise的并行和串行执行...
js代码-利用promise 手写一个限制最大并发的类
07-14
本主题聚焦于如何利用Promise来手写一个类，这个类可以限制并发执行的任务数量，这对于优化资源利用和防止服务器过载来说至关重要。 首先，让我们了解Promise的基本概念。Promise代表一个异步操作的最终完成或失败...
js代码-手写Promise
07-16
本文将深入探讨如何手写一个简单的Promise实现，以帮助理解其内部工作原理。 首先，Promise有三种状态：pending（等待中）、fulfilled（已完成）和rejected（已拒绝）。状态一旦改变，就不会再变，这也是Promise的...
SpringBoot源码分析（请求部分）
Rex的博客
10-01 261
springboot请求部分源码分析
写好 JavaScript 异步代码的几个推荐做法
油墨香^-^的博客
08-04 299
今天给大家来推荐几个写好JavaScript异步代码的推荐做法，每种场景都有一个对应的eslint规则，大家可以选择去配置一下。
ES6常见面试题（三）
DGplayweb的博客
11-02 992
15、使用class 手写一个promise //创建一个Promise的类 class Promise{ constructor(executer){//构造函数constructor里面是个执行器 this.status = 'pending';//默认的状态 pending this.value = undefined//成功的值默认undefined this.reason = undefined//失败的值默认undefined //状态
对Promise中的resolve，reject，catch的理解
热门推荐
勿忘初心的博客
05-15 5万+
对promise这个概念之前已经有了一些浅显的理解，相关文章-&gt;戳这里，最近又有了一些新的理解。.then()的时候到底是在then什么…首先要理解…Promise是一个对象，有then()方法的对象then()的入参是一个函数，通常在promise链中，入参是 一个返回promise的函数 ，这句话好像有点拗口，就是说入参是一个函数，这个函数会return一个promise对象如何破坏pr...
Promise构造函数的一些理解
m0_67805754的博客
05-26 226
promise实例有三种状态:pending等待,fulfilled成功,rejected失败 let p1 = new Promise(function(resolve,reject){ //一段异步代码 异步代码成功时调用resolve(obj1) 异步代码失败时调用reject(obj2) }); p1.then(function(rs){ // 如果p1的状态是fulfilled，则then中的函数会执行，且obj1的值会传给rs }).catch(function(rs){...
ESlint常见警告解决及配置讲解
yezi__6的博客
10-30 1万+
作为前端开发工程师的你，是不是很难忍代码中因为配置了eslint后，又配置了自动修复eslint问题但是还是无法避免eslint警告⚠️和报错呢？？看着一行行红色的警告错误提示是不是很难受啊！但是有些问题确不知道要怎样改呢？ 那如何查自己的项目中自己的命令呢？ npm run lint 你就可以看到下面的报错总数： 如果你也有这样的困扰，那看这个准没错，后续有的eslint问题处理也会继续发出来。当然如果打家有更好的解决办法，请在下方评论区赐教哦！ 项目中eslint配置导致的警告点解决 1.props
用 class 写法完整实现一个 Promise
weixin_34326558的博客
05-16 510
1.前言 本文分析 Promise 特性的了解，完整实现了 Promise 所有功能。没有参考原生 Promise 的写法，自己根据思路一步一步完成以及描述，每个构建模块由：1、Promise 特性描述；2、实现特性的完整思路(分析一波) 3、项目代码；4、功能测试代码 几个部分组成。大致用到的知识有： 1、变量私有化；2、订阅发布模式；...
Promise基本使用、三种状态、链式调用及简写、all方法
鸢尾_的博客
06-12 1983
Promise基本使用、三种状态、链式调用及简写、all方法
【TS】1590- TypeScript 5.0 将支持全新的装饰器写法！
pingan8787
02-09 577
就在前段时间，TypeScript 发布了 5.0 beta 版本，带来了诸多新功能，其中比较重要的一项改动就是装饰器写法的重构。今天我们就主要来看看新旧装饰器使用上的区别，其他新特性我会在后续文章中帮大家解读。装饰器模式是一种经典的设计模式，它可以在不修改被装饰者（如某个函数、某个类等）源码的前提下，为被装饰者增加 / 移除某些功能（收集用户定义的类/函数的信息，例如用于生成路由表，实现依赖注入...
使用class手写一个promise
最新发布
03-16
Promise是一种异步编程的解决方案，可以避免回调地狱的问题。下面是使用class手写一个Promise的示例代码： ``` class MyPromise { constructor(executor) { this.status = 'pending'; // Promise的状态 this.value = undefined; // Promise的结果 this.reason = undefined; // Promise的错误信息 const resolve = (value) => { if (this.status === 'pending') { this.status = 'fulfilled'; this.value = value; } }; const reject = (reason) => { if (this.status === 'pending') { this.status = 'rejected'; this.reason = reason; } }; try { executor(resolve, reject); } catch (error) { reject(error); } } then(onFulfilled, onRejected) { onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : (value) => value; onRejected = typeof onRejected === 'function' ? onRejected : (reason) => { throw reason }; const promise2 = new MyPromise((resolve, reject) => { if (this.status === 'fulfilled') { setTimeout(() => { try { const x = onFulfilled(this.value); resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }, ); } else if (this.status === 'rejected') { setTimeout(() => { try { const x = onRejected(this.reason); resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }, ); } else { this.onFulfilledCallbacks.push(() => { setTimeout(() => { try { const x = onFulfilled(this.value); resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }, ); }); this.onRejectedCallbacks.push(() => { setTimeout(() => { try { const x = onRejected(this.reason); resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }, ); }); } }); return promise2; } catch(onRejected) { return this.then(null, onRejected); } } function resolvePromise(promise2, x, resolve, reject) { if (promise2 === x) { reject(new TypeError('Chaining cycle detected for promise')); } let called = false; if (x !== null && (typeof x === 'object' || typeof x === 'function')) { try { const then = x.then; if (typeof then === 'function') { then.call(x, (y) => { if (called) return; called = true; resolvePromise(promise2, y, resolve, reject); }, (r) => { if (called) return; called = true; reject(r); }); } else { resolve(x); } } catch (error) { if (called) return; called = true; reject(error); } } else { resolve(x); } } ``` 以上是一个简单的Promise实现，其中包含了Promise的基本功能，如状态管理、then方法、catch方法等。需要注意的是，Promise的实现并不是一件简单的事情，需要考虑到各种边界情况，才能保证其正确性和稳定性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值