从零开始手写模拟Promise

已于 2023-03-06 20:59:15 修改
阅读量316 收藏 1
点赞数
文章标签： javascript
于 2020-12-26 16:15:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43923712/article/details/111753538
版权

手写模拟Promise

手写模拟Promise

璃安猫： 该文章中的MyPromise参考其他文章的Promise源码，然后使用自己的思路总结从零开始手写Promise的过程，若其中有不足之处劳烦指正。

分析Promise

Promise五种使用情况

  1. 链式执行同步任务
new Promise((resolve, reject) => {
  resolve('同步任务');
  // reject('同步 error');
}).then((value) => {
  console.log(value);
  return new Promise((resolve) => resolve(222))
}).catch((err) => {
  console.log(err);
})
  1. 链式执行异步任务并使用finally函数
new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('异步：ok');
  }, 1000);
}).then((value) => {
  console.log(value);
}).catch((err) => {
  console.log(err);
}).finally((value) => {
  console.log(value);
})
  1. 调用自身
// 第一种 验证then漏洞
const promise = new Promise(resolve => resolve(111))
  .then(() => {
    return promise
  })
promise.then(undefined, err => console.log(err));

// 第二种
const promise = Promise.resolve()
  .then(() => {
    return promise
  })
promise.catch(err=> console.log(err) );
  1. 使用resolve及reject快速创建Promise对象
Promise.resolve('111').then(v => console.log(v));
Promise.resolve(new Promise(resolve => resolve('222'))).then(v => console.log(v));

Promise.reject('111').catch(err => console.log(err));
Promise.reject(new Promise(resolve => resolve('222'))).catch(v => console.log(v));
  1. 使用all方法并行执行任务
const arr = ['111', Promise.resolve(222), Promise.resolve(333)];
Promise.all(arr).then(v => console.log(v)).catch(err => console.log(err));

const arr = ['111', Promise.resolve(222), Promise.reject('444'), Promise.resolve('111')];
Promise.all(arr).then(v => console.log(v)).catch(err => console.log(err));

Promsie结构分析

变量

变量名描述
status存储状态 ：fulfilled rejected pending
value存储fulfilled状态结果
reason存储rejected状态结果
successCallback[]成功回调函数数组
failCallback[]失败回调函数数组

函数

实例方法描述
resolve改变自身状态并存储值
reject改变自身状态并存储值
then执行回调函数并实现链式调用
catch执行失败回调函数并实现链式调用
finally不论失败或成功都执行回调（不获取结果值，仅传递结果）
静态方法描述
resolve快速创建成功的Promise
reject快速创建失败的Promise
all实现并行执行Promise任务

基础结构代码

// 三个状态值为全局变量  
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'

class MyPromise {
  status = PENDING;
  value;
  reason;
  successCallback = [];
  failCallback = [];

  // 构造函数
  constructor (Fn) {}

  // 由于该函数调用在传参函数内部 即  resolve, 若为普通函数this则指向全局
  // 因此使用箭头函数将this指向MyPromise对象
  resolve = value => {}

  // 此处同理
  reject = reason => {}

  // then及以下的函数使用方式都为  .then ， 因此this指向MyPromise 不需要使用箭头函数
  then (successCallback, failCallback) {}

  catch (failCallback) {}

  finally () {}

  static resolve () {}

  static reject () {}

  static all () {}
}

完善constructor & 实现 resolve reject

class MyPromise {
  status = PENDING;
  value;
  reason;
  successCallback = [];
  failCallback = [];

  // 构造函数接收传参
  constructor (Fn) {
    try {
      // 执行传入函数
      Fn(this.resolve, this.reject);
    } catch (err) {
      this.reject(err);
    } 
  }

  // 由于该函数调用在传参函数内部 即  resolve, 若为普通函数this则指向全局
  // 因此使用箭头函数将this指向MyPromise对象
  resolve = value => {
    // 状态一经确认不可更改
    if(this.status !== PENDING) return;
    this.status = FULFILLED;
    this.value = value;
    // 若有回调函数则逐个执行回调函数
    // 注： 此处回调是执行异步任务是status仍未改变 但then已执行，因此会在then中存入回调任务
    while(this.successCallback.length) {
      // 将任务从头出栈并执行
      this.successCallback.shift()();
    }
  }

  // 此处同理
  reject = reason => {
    if(this.status !== PENDING) return;
    this.status = REJECTED;
    this.reason = reason;
    while(this.failCallback.length) {
      this.failCallback.shift()();
    }
  }
}

实现then

class MyPromise {
  // ...

  // then及以下的函数使用方式都为  .then ， 因此this指向MyPromise 不需要使用箭头函数
  then(successCallback, failCallback) {
    // 如果没有传入回调函数，则将值继续传递
    successCallback = successCallback ? successCallback : value => value;
    failCallback = failCallback ? failCallback : reason => { throw reason };

    // 返回promise用于then链式调用
    const promise = new MyPromise((resolve, reject) => {
      // 判断 .then前的Promise的状态  此处this指向.then前的promise
      switch (this.status) {
        case FULFILLED: {
          // 使用异步任务以延迟执行该代码从而获取当前的promise
          setTimeout(() => {
            try {
              const result = successCallback(this.value);
              // 该函数用于判断返回结果是否为自身以及promise等情况
              resolvePromise(promise, result, resolve, reject);
            } catch (err) {
              reject(err);
            }
          }, 0);
          break;
        };
        case REJECTED: {
          setTimeout(() => {
            try {
              const result = failCallback(this.reason);
              resolvePromise(promise, result, resolve, reject);
            } catch (err) {
              reject(err);
            }
          }, 0);
          break;
        };
        // 该情况是promsie中为异步任务，因此执行then时status还未改变
        // 因此将回调函数存储起来
        case PENDING: {
          // 存入成功回调
          this.successCallback.push(() => {
            setTimeout(() => {
              try {
                const result = successCallback(this.value);
                // 该函数用于判断返回结果是否为自身以及promise等情况
                resolvePromise(promise, result, resolve, reject);
              } catch (err) {
                reject(err);
              }
            }, 0);
          });

          // 存入失败回调
          this.failCallback.push(() => {
            setTimeout(() => {
              try {
                const result = failCallback(this.reason);
                resolvePromise(promise, result, resolve, reject);
              } catch (err) {
                reject(err);
              }
            }, 0);
          });
        }
      }
    });

    return promise;
  }

  //...
}

// 处理then返回的promise的结果状态
function resolvePromise(promise, result, resolve, reject) {
  // 返回的结果为自身promise 造成循环调用
  if (promise === result) {
    reject(new TypeError('Chaining cycle detected for promise #<Promise>'));
  }
  // 返回结果为promise
  if (result instanceof MyPromise) {
    result.then(v => resolve(v));
  }
  // 返回结果为普通值
  else {
    resolve(result);
  }
}

至此，可以使用自己手写的Promise验证开头的 1-3 种使用情况 （除去catch及finally）
验证完毕无误后，接着实现其他方法

实现catch 及 finally

class MyPromsie {
  // ....

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

  finally(callback) {
    // 执行回调函数，并将上一个promise返回的value继续传递
    return this.then(value => {
      // 若callback为异步任务则需等待异步任务完成再执行下一个任务
      // 因此使用 Promise包装callback 避免不等待callback直接执行下一个任务
      // 此外不使用finally回调函数的返回值，只传递上一个任务的值
      return new MyPromise(resolve => resolve(callback())).then(() => value);
    }, reason => {
      return new MyPromise(resolve => resolve(callback())).then(() => { throw reason });
    })
  }

  // ...
}

至此，可以使用自己手写的Promise验证开头的 1-3 种使用情况
验证完毕无误后，接着实现其他方法

实现静态方法resolve及reject,优化finally

class MyPromise {
  // ...

  finally(callback) {
    // 执行回调函数，并将上一个promise返回的value继续传递
    return this.then(value => {
      // 若callback为异步任务则需等待异步任务完成再执行下一个任务
      // 因此使用 Promise包装callback 避免不等待callback直接执行下一个任务
      // 此外不使用finally回调函数的返回值，只传递上一个任务的值
      return MyPromise.resolve(callback()).then(() => value);
    }, reason => {
      return MyPromise.resolve(callback()).then(() => { throw reason });
    })
  }

  static resolve(value) {
    // 如果value是promise则直接返回
    if (value instanceof MyPromise) return value;
    // 如果value是普通值则创建返回
    else {
      return new MyPromise((resolve) => resolve(value));
    }
  }

  static reject(reason) {
    // 如果value是promise则直接返回
    if (reason instanceof MyPromise) return reason;
    // 如果value是普通值则创建返回
    else {
      return new MyPromise((resolve, reject) => reject(reason));
    }
  }

  // ...
}

至此，可以使用自己手写的Promise验证开头的 1-4 种使用情况
验证完毕无误后，接着实现其他方法

实现all方法

class MyPromise {
  // ...

  static all(arr) { 
    // 返回一个promise
    return new MyPromise((resolve, reject) => {
      // 用于记录返回结果
      const result = [];
      function addData (i, value) {
        result[i] = value;
        //判断结果数量是否对应 用于等待异步处理的结果
        if (result.length === arr.length) {
          resolve(result);
        }
      }

      arr.forEach((value, i) => {
        // 如果value为promise
        if (value instanceof MyPromise) {
          value.then(v => addData(i, v), err => reject(err));
        }
        // 如果value为普通值
        else {
          addData(i, value);
        }
      })
    })
  }
}

至此，可以使用自己手写的Promise验证开头的 1-5 种使用情况
验证完毕无误后，Promise功能基本实现

完整的MyPromise代码

const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';

class MyPromise {
  status = PENDING;
  value;
  reason;
  successCallback = [];
  failCallback = [];

  // 构造函数接收传参
  constructor(Fn) {
    try {
      // 执行传入函数
      Fn(this.resolve, this.reject);
    } catch (err) {
      this.reject(err);
    }
  }

  // 由于该函数调用在传参函数内部 即  resolve, 若为普通函数this则指向全局
  // 因此使用箭头函数将this指向MyPromise对象
  resolve = value => {
    // 状态一经确认不可更改
    if (this.status !== PENDING) return;
    this.status = FULFILLED;
    this.value = value;
    // 若有回调函数则逐个执行回调函数
    // 注： 此处回调是执行异步任务是status仍未改变 但then已执行，因此会在then中存入回调任务
    while (this.successCallback.length) {
      // 将任务从头出栈并执行
      this.successCallback.shift()();
    }
  }

  // 此处同理
  reject = reason => {
    if (this.status !== PENDING) return;
    this.status = REJECTED;
    this.reason = reason;
    while (this.failCallback.length) {
      this.failCallback.shift()();
    }
  }

  // then及以下的函数使用方式都为  .then ， 因此this指向MyPromise 不需要使用箭头函数
  then(successCallback, failCallback) {
    // 如果没有传入回调函数，则将值继续传递
    successCallback = successCallback ? successCallback : value => value;
    failCallback = failCallback ? failCallback : reason => { throw reason };

    // 返回promise用于then链式调用
    const promise = new MyPromise((resolve, reject) => {
      // 判断 .then前的Promise的状态  此处this指向.then前的promise
      switch (this.status) {
        case FULFILLED: {
          // 使用异步任务以延迟执行该代码从而获取当前的promise
          setTimeout(() => {
            try {
              const result = successCallback(this.value);
              // 该函数用于判断返回结果是否为自身以及promise等情况
              resolvePromise(promise, result, resolve, reject);
            } catch (err) {
              reject(err);
            }
          }, 0);
          break;
        };
        case REJECTED: {
          setTimeout(() => {
            try {
              const result = failCallback(this.reason);
              resolvePromise(promise, result, resolve, reject);
            } catch (err) {
              reject(err);
            }
          }, 0);
          break;
        };
        // 该情况是promsie中为异步任务，因此执行then时status还未改变
        // 因此将回调函数存储起来
        case PENDING: {
          // 存入成功回调
          this.successCallback.push(() => {
            setTimeout(() => {
              try {
                const result = successCallback(this.value);
                // 该函数用于判断返回结果是否为自身以及promise等情况
                resolvePromise(promise, result, resolve, reject);
              } catch (err) {
                reject(err);
              }
            }, 0);
          });

          // 存入失败回调
          this.failCallback.push(() => {
            setTimeout(() => {
              try {
                const result = failCallback(this.reason);
                resolvePromise(promise, result, resolve, reject);
              } catch (err) {
                reject(err);
              }
            }, 0);
          });
        }
      }
    });

    return promise;
  }

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

  finally(callback) {
    // 执行回调函数，并将上一个promise返回的value继续传递
    return this.then(value => {
      // 若callback为异步任务则需等待异步任务完成再执行下一个任务
      // 因此使用 Promise包装callback 避免不等待callback直接执行下一个任务
      // 此外不使用finally回调函数的返回值，只传递上一个任务的值
      return MyPromise.resolve(callback()).then(() => value);
    }, reason => {
      return MyPromise.resolve(callback()).then(() => { throw reason });
    })
  }

  static resolve(value) {
    // 如果value是promise则直接返回
    if (value instanceof MyPromise) return value;
    // 如果value是普通值则创建返回
    else {
      return new MyPromise((resolve) => resolve(value));
    }
  }

  static reject(reason) {
    // 如果value是promise则直接返回
    if (reason instanceof MyPromise) return reason;
    // 如果value是普通值则创建返回
    else {
      return new MyPromise((resolve, reject) => reject(reason));
    }
  }

  static all(arr) { 
    // 返回一个promise
    return new MyPromise((resolve, reject) => {
      // 用于记录返回结果
      const result = [];
      function addData (i, value) {
        result[i] = value;
        // 判断结果数量是否对应 用于等待异步处理的结果
        if (result.length === arr.length) {
          resolve(result);
        }
      }

      arr.forEach((value, i) => {
        // 如果value为promise
        if (value instanceof MyPromise) {
          value.then(v => addData(i, v), err => reject(err));
        }
        // 如果value为普通值
        else {
          addData(i, value);
        }
      })
    })
  }
}

// 处理then返回的promise的结果状态
function resolvePromise(promise, result, resolve, reject) {
  // 返回的结果为自身promise 造成循环调用
  if (promise === result) {
    reject(new TypeError('Chaining cycle detected for promise #<Promise>'));
  }
  // 返回结果为promise
  if (result instanceof MyPromise) {
    result.then(v => resolve(v));
  }
  // 返回结果为普通值
  else {
    resolve(result);
  }
}
璃安猫
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
js简单模拟Promise
威威威威的标题
02-23 614
直接上代码 class myPromise { // 创建myPromise实例时接收fn constructor(fn) { this.thencallback = []; this.catchcallback = []; this.value = null; this.error = null; this.state = 'pending'; // 设置传入的返回值并将状态置为已完成
promise模拟
qq_36303110的博客
03-22 553
const PENDING = "PENDING"; const FULFILLED = "FULFILLED"; const REJECTED = "REJECTED"; // 决定then返回的promise的状态 function resolvePromise(x, promise2, resolve, reject) { if (promise2 === x) { return reject(new TypeError('循环引用')) } if (typeof x ===
[精讲]promise对象常用方法，与手写模拟
m0_61696809的博客
02-25 1122
这意味着，当一个宏任务中包含了多个微任务时，这些微任务会在该宏任务执行完成后被依次执行，而不是在该宏任务中立即执行。在 constructor 构造函数中，定义了 Promise 的三种状态：PENDING（进行中）、FULFILLED（已成功）、REJECTED（已失败），以及 Promise 对象的属性，包括状态、成功结果、失败原因、保存成功回调函数的数组和保存失败回调函数的数组。当一个宏任务执行完成后，才会去检查是否存在微任务，如果存在，则会依次执行微任务队列中的任务，直到微任务队列为空。
X-Editable提交自动进入success且无结果问题解决办法
chenjujiu9439的博客
08-28 508
被使用的代码： $('.panel').find('.panel-heading .btn-trash').each(function(){ var that = this; var id = ...
ajax跨域请求回调代码,ajax跨域请求，自定义回调方法名defined。我就呵呵了。
weixin_33421437的博客
08-06 668
之前说了，ajax的jsonp跨域请求，返回的是json格式。用了雅虎的YQL才能正确访问，-----$.ajax跨域，服务器返回的是json格式。经过后台的不懈努力，现在跨域请求回来的是jsonp格式了。这次也没啥重要的事，只是给自己范的错误，留个念想。页面中有$(function(){})了，所以我把所有的js代码都放到这个里面了，所以出现了这样的报错image.png后台返回的数据格式ima...
彻底掌握 Promise - 原生 Promise.finally 的实现(六)
记得抬头微笑
04-22 3160
目录前言一、finally的使用方法具体使用方法执行结果二、实现原理三、具体实现总结 前言 在 [\[ 彻底掌握 Promise - 原生 Promise.all 的实现(四)\]](https://blog.csdn.net/qq_40146638/article/details/123813571) 中我们已经实现了 Promise 的 all 方法，下面这篇文章，主要讲述 Promise.finally 方法的实现。 finally()方法返回一个Promise。在promise结束时，无论结果是
从零开始手写VIO课件
07-06
VIO 知识面广，公式繁多复杂，初学...为此，贺一家与高博在深蓝学院联合推出了『从零开始手写VIO』课程。通过这门课程，我们将详细讲解VIO的实现细节。更重要的是，课程将手写后端作为重点。 从零手写VIO课程知识点整理
如何从零开始利用js手写一个Promise库详解
10-18
ES2015 推出了JS 的 Promise ，而在没有原生支持的时候，我们也可以使用诸如 Promises/A+ 的库的帮助，在我们的代码里实现Promise 的支持，下面这篇文章主要给大家介绍了如何从零开始利用js手写一个Promise库的相关...
如何从零开始手写Koa2框架
10-17
主要介绍了如何从零开始手写Koa2框架，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
xmljava系统源码-ioc:Thejavaiocframework（从零开始手写模拟springIoc框架）
06-05
xml java系统源码 IoC 是一款 spring ioc 核心功能简化实现版本，便于学习和理解原理。 创作目的 使用 ...使用非常频繁，实际上对于源码一直没有静下心来学习过。...源码存在一个问题，那就是过于抽象，导致学习起来成本...
JavaScript模拟实现Promise功能的示例代码
不定时分享最优质的网络技术与教程，满满的干货。
12-03 400
模拟Promise的功能, 按照下面的步骤,一步一步1. 新建是个构造函数2. 传入一个可执行函数 函数的入参第一个为 fullFill函数 第二个为 reject函数； 函数立即执行， 参数函数异步执行3. 状态一旦更改就不可以变更 只能 pending => fulfilled 或者 pending => rejected4. then 的时候要处理入参的情况 successCallback 和failCallback 均可能为非函数默认的 failCallback 一定要将异常抛出， 这样下一个pro
模拟Promise的功能
qq_42221826的博客
11-30 173
模拟Promise的功能, 按照下面的步骤,一步一步 1. 新建是个构造函数 2. 传入一个可执行函数 函数的入参第一个为 fullFill函数 第二个为 reject函数； 函数立即执行， 参数函数异步执行3. 状态一旦更改就不可以变更 只能 pending => fulfilled 或者 pending => rejected4. then 的时候要处理入参的情况 su...
Promise对象 （基础三）
Quiet_Nov的博客
07-26 628
Promise.race方法的参数与Promise.all方法一样，如果不是Promise实例，就会先调用下面讲到Promise.resolve方法，将参数转为Promise实例，再进一步处理。只有p1、p2、p3的状态变成Fulfilled，p的状态才会变成Fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。如果参数是一个原始值，或者是一个不具有then方法的对象，那么Promise.resolve方法返回一个新的Promise对象，状态为Resolved。...
模拟实现一个 Promise.finally
包磊磊的博客
03-19 1253
Promise.prototype.finally = function (callback) { let P = this.constructor; return this.then( value => P.resolve(callback()).then(() => value), reason => P.resolve(callback()).t...
模拟Promise实现
qq_40285497的博客
08-24 559
1. promise核心 // 封装promise // 1. Promise 就是一个类，在执行这个类的时候，需要传递一个执行器进去，执行去会立即执行 // 2. Promise 中有三个状态，分别为：成功(fulfilled)、失败(rejected)、等待(pending)；一旦状态确定就不可更改 // 3. resolve和reject函数用来更改状态 // 4. then 方法内部做的事情就是判断状态，根据状态调用不同的回调函数(成功失败) // 5. then 成功回调有一个参数，表示成功之后的
promise的模拟实现
weixin_34413802的博客
03-17 614
1.概述 1.1 什么是promise Promise 对象是 JavaScript 的异步操作解决方案，为异步操作提供统一接口。它起到代理作用（proxy），充当异步操作与回调函数之间的中介，使得异步操作具备同步操作的接口。 1.2 promise解决的问题 1.2.1 回调地狱 Promise 可以让异步操作写起来，就像在写同步操作的流程，而不必一层层地嵌套回调函数。 1.2.2 并行结果 如...
模拟实现Promise
liuyaqi1993的博客
03-30 1549
最近复习了一下Promise，决定自己实现一下，加深对Promise流程的理解。当然，这个模拟还不是很完善。/** * 使用MyPromise模拟Promise基本功能： * MyPromise新建就立即执行其参数fn，这点比较重要 * fn里面必须调用状态函数resolve或者reject之一 * 每次.then接受一个处理MyPromise当前状态的回调函数，包括resolve和rej
模拟Promise() 源码
Rock_clip的博客
10-19 178
1.模拟all()方法 在Promise函数中的 all() 方法里面，能够实现在多个Promise对象里面，如果状态全部为resolve的话，则all() 方法返回的结果是resolve，并将所有的Promise对象放到一个数组里面；如果有一个状态为reject的话，则all()方法返回的结果是reject,将第一个出现reject对象的下标作为PromiseResult的值。演示代码如下 总体代码如下： const MyPromise = (...
从零开始手写vio 笔记
最新发布
12-16
从零开始手写vio 笔记很简单。首先，准备一本笔记本和一支笔。然后，找一个安静舒适的地方，准备开始记录。 开始写之前，先留出每一页的标题和日期，这样可以更好地组织和查找笔记。然后，根据需要，可以使用不同的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值