关于Promise API 的实现

最新推荐文章于 2024-04-07 17:33:23 发布
最新推荐文章于 2024-04-07 17:33:23 发布
阅读量143 收藏
点赞数 1
分类专栏： 前端 文章标签： javascript es6 promise es5
原文链接：https://blog.csdn.net/qq_42552393/article/details/117000022#comments_16549335
版权
手动实现 Promise API
一、Promise 手写
  • 原理：利用发布者订阅者模式 构造函数接收一个 executor 函数，并会在 new Promise() 时立即执行该函数 then时收集依赖，将回调函数收集到 成功/失败队列 executor 函数中调用 resolve/reject 函数
    resolve/reject 函数被调用时会通知触发队列中的回调
两种写法：
写法1：ES5
(function(window) {
  const PENDING = "pending";
  const RESOLVED = "resolved";
  const REJECTED = "rejected";

  function Promise(executor) {
    this.state = PENDING;
    this.data = null;
    this.callbacks = [];

    function resolve(value) {
      // Promise的状态只能改一次，所以只有pending状态时候才能执行resolve和reject
      // 当Promise的状态为resolved|rejected就不能再次改变状态了
      if (this.state !== PENDING) {
        return;
      }

      this.state = RESOLVED;
      this.data = value;

      if (this.callbacks.length > 0) {
        setTimeout(() => {
          this.callbacks.forEach(callbacksObj => {
            callbacksObj.onResolved(value);
          });
        });
      }
    }

    function reject(reason) {
      // Promise的状态只能改一次，所以只有pending状态时候才能执行resolve和reject
      // 当Promise的状态为resolved|rejected就不能再次改变状态了
      if (this.state !== PENDING) {
        return;
      }

      this.state = REJECTED;
      this.data = reason;

      if (this.callbacks.length > 0) {
        setTimeout(() => {
          this.callbacks.forEach(callbacksObj => {
            callbacksObj.onRejected(reason);
          });
        });
      }
    }

    try {
      executor(resolve.bind(this), reject.bind(this));
    } catch (e) {
      // 执行器抛出异常，Promise状态为失败，调用reject
      reject(e);
    }
  }

  Promise.prototype = {
    constructor: Promise,

    then(onResolved, onRejected) {
      // 指定默认的回调函数
      // 如果用户没有指定onRejected | onResolved 我们需要把值|异常穿透下去
      // 异常穿透的关键一步，内部会捕捉并返回一个状态失败的Promise
      onRejected =
        typeof onRejected === "function"
          ? onRejected
          : reason => {
              throw reason;
            };
      onResolved =
        typeof onResolved === "function" ? onResolved : value => value;

      // 1. then中的回调函数发生异常，then返回失败的Promise，reason为异常
      // 2. then的回调函数运行，返回非Promise值，then返回成功的Promise，value为return的值
      // 3. then的回调函数运行，返回Promise，则then返回该promise
      const self = this;

      return new Promise((resolve, reject) => {
        function handle(callback) {
          try {
            const result = callback(self.data);
            if (result instanceof Promise) {
              // 第3种情况，得到返回的promise值|原因，并改变返回的promise状态
              result.then(resolve, reject);
            } else {
              // 第2种情况
              resolve(result);
            }
          } catch (e) {
            // 第1种情况
            reject(e);
          }
        }

        if (self.state === PENDING) {
          // Promise状态为pending，先把回调函数放到队列里
          self.callbacks.push({
            onResolved() {
              handle(onResolved);
            },
            onRejected() {
              handle(onRejected);
            }
          });
        } else if (self.state === RESOLVED) {
          // Promise状态为resolved，异步执行回调函数，并通过handle改变return的Promise
          setTimeout(() => {
            handle(onResolved);
          });
        } else {
          // Promise状态为rejected，异步执行回调函数，并通过handle改变return的Promise
          setTimeout(() => {
            handle(onRejected);
          });
        }
      });
    },

    catch(onRejected) {
      // 第一个参数写null，内部会把value数据向下传递
      return this.then(null, onRejected);
    }
  };

  Promise.resolve = function(value) {
    // value 可以是Promise，也可以是值
    // Promise => 根据promise状态改变return的状态
    // 值 => 成功的Promise
    return new Promise((resolve, reject) => {
      if (value instanceof Promise) {
        value.then(resolve, reject);
      } else {
        resolve(value);
      }
    });
  };
  Promise.reject = function(reason) {
    return new Promise((resolve, reject) => {
      reject(reason);
    });
  };
  Promise.all = function(iterable) {
    return new Promise((resolve, reject) => {
      const arr = new Array(iterable.length);
      const counter = 0;
      iterable.forEach((p, index) => {
        // 如果iterable中有值不是promise，那么包装成promise
        Promise.resolve(p).then(
          value => {
            // 执行onResolved几次，就成功几次
            // 这里不能用value代替counter，因为所有的操作都是异步的，不能确定谁先完成，如果最后一个先完成就会出问题
            arr[index] = value;
            counter++;
            counter === arr.length ? resolve(arr) : null;
          },
          reason => {
            // 只要有一个失败，整个promise失败
            reject(reason);
          }
        );
      });
    });
  };

  Promise.all = function(iterable) {
    return new Promise((resolve, reject) => {
      let arr = [];
      iterable.forEach((p, index) => {
        Promise.resolve(p).then(
          value => {
            arr[index] = value;
            if (arr.length === iterable.length) {
              resolve(arr);
            }
          },
          reason => {
            reject(reason);
          }
        );
      });
    });
  };

  Promise.race = function(iterable) {
    return new Promise((resolve, reject) => {
      iterable.forEach(p => {
        // 如果iterable中有值不是promise，那么包装成promise
        Promise.resolve(p).then(
          value => {
            // 先成功，先调用，后续的不再改变状态
            resolve(value);
          },
          reason => {
            // 先失败，先调用，后续的不再改变状态
            reject(reason);
          }
        );
      });
    });
  };

  // 自定义工具方法
  Promise.resolveDelay = function(value, time) {
    /**
     *  返回一个成功的Promise对象，它在指定时间后才能成功
     */
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (value instanceof Promise) {
          value.then(resolve, reject);
        } else {
          resolve(value);
        }
      }, time);
    });
  };

  Promise.rejectDelay = function(reason, time) {
    /**
     *  返回一个Promise对象，它在指定时间后才能确定失败
     */
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        reject(reason);
      }, time);
    });
  };

  window.Promise = Promise;
})(window);
写法二：ES6 class
const PENDING = "pending";
const RESOLVED = "resolved";
const REJECTED = "rejected";

class Promise {
  constructor(executor) {
    this.state = PENDING;
    this.data = null;
    this.callbacks = [];

    let resolve = value => {
      if (this.state !== PENDING) {
        return;
      }
      this.state = RESOLVED;
      this.data = value;
      if (this.callbacks.length) {
        process.nextTick(() => {
          this.callbacks.forEach(item => {
            item.onResolved(this.data);
          });
        });
      }
    };

    let reject = reason => {
      if (this.state !== PENDING) {
        return;
      }
      this.state = REJECTED;
      this.data = reason;
      if (this.callbacks.length) {
        process.nextTick(() => {
          this.callbacks.forEach(item => {
            item.onRejected(this.data);
          });
        });
      }
    };

    try {
      executor(resolve, reject);
    } catch (e) {
      reject(e);
    }
  }

  then(onResolved, onRejected) {
    onResolved = typeof onResolved === "function" ? onResolved : value => value;
    onRejected =
      typeof onRejected === "function"
        ? onRejected
        : reason => {
            throw reason;
          };

    return new Promise((resolve, reject) => {
      let handle = callback => {
        try {
          const result = callback(this.data);
          if (result instanceof Promise) {
            result.then(resolve, reject);
          } else {
            resolve(result);
          }
        } catch (e) {
          reject(e);
        }
      };

      if (this.state === PENDING) {
        this.callbacks.push({
          onResolved() {
            handle(onResolved);
          },
          onRejected() {
            handle(onRejected);
          }
        });
      } else if (this.state === RESOLVED) {
        process.nextTick(() => {
          handle(onResolved);
        });
      } else {
        process.nextTick(() => {
          handle(onRejected);
        });
      }
    });
  }

  catch(onRejected) {
    return this.then(null, onRejected);
  }

  static resolve(value) {
    return new Promise((resolve, reject) => {
      if (value instanceof Promise) {
        value.then(resolve, reject);
      } else {
        resolve(value);
      }
    });
  }

  static reject(reason) {
    return new Promise((resolve, reject) => {
      if (reason instanceof Promise) {
        reason.then(reject, reject);
      } else {
        reject(reason);
      }
    });
  }

  static all(iterable) {
    return new Promise((resolve, reject) => {
      const arr = [];
      let counter = 0;
      iterable.forEach((p, index) => {
        Promise.resolve(p).then(
          value => {
            counter++;
            arr[index] = value;
            if (counter === iterable.length) {
              resolve(arr);
            }
          },
          reason => {
            reject(reason);
          }
        );
      });
    });
  }
}

module.exports = Promise;
二、Promise.all() 手写
  • Promise.all() API 的功能：Promise.all(iterable) 方法返回一个 Promise 实例，此实例在 iterable 参数内所有的 promise 都完成（resolved）”或参数中不包含 promise 时回调完成（resolve）；如果参数中 promise 有一个失败（rejected），此实例回调失败（reject），失败原因的是第一个失败 promise 的结果。
  • 实现思路：首先需要将输入数组中的所有 Promise 对象均运行起来；在有 Promise 对象 resolve 后，判断是否所有对象均已 resolve，当所有 Promise 均被 resolve 后进行整体的 resolve；此外，当任何一个 Promise 对象出现 reject 后，直接 reject。
function myPromiseAll(promise) {
  if (!Array.isArray(promise)) {
    // PromiseAll的入参必须是数组
    return reject(new TypeError("promise must be an array"));
  }
  let result = [];
  let count = 0;
  return new Promise((resolve, reject) => {
    // 执行所有的 Promise 对象
    promise.forEach(item => {
      Promise.resolve(item)
        .then(res => {
          result.push(res);
          count++;
          if (count == promise.length) {
            // 当所有 Promise 都 resolve 之后，统一 resolve
            resolve(result);
          }
        })
        .catch(err => {
          // 只要有任何 Promise 出现 reject， Promise.newAll 就直接 reject
          reject(err);
        });
    });
  });
}
三、Promise.race() 手写
  • Promise.race() API 的功能：Promise.race(iterable) 方法返回一个 promise，一旦迭代器中的某个 promise 解决或拒绝，返回的 promise 就会解决或拒绝。
  • 实现思路：Promise.race() 实际上相当于一个竞速过程，第一给被 resolve 或 reject 的对象会被 resolve 或 reject。因此，只需要将上面 Promise.all 的代码进行些许的改动即可
function myPromiseRace(promise) {
  return new Promise((resolve, reject) => {
    // 执行所有的 Promise 对象
    promise.forEach(item => {
      Promise.resolve(item)
        .then(res => {
          // 出现第一个被 resolve 的直接 resolve
          resolve(res);
        })
        .catch(err => {
          // 出现第一个被 reject 的直接 reject
          reject(err);
        });
    });
  });
}
四、Promise.allSettled() 手写

  • Promise.allSettled() API 的功能：Promise.allSettled() 方法返回一个在所有给定的 promise 已被决议或被拒绝后决议的 promise，并带有一个对象数组，每个对象表示对应的promise 结果。

  • 实现思路：首先同样运行所有的 Promise 对象，与 Promise.all 不同的是，在有 Promise 被 reject 之后，我们不会直接 reject，而是记录下该 reject 的值和对应的状态 rejected；同样地，当 Promise 对象被 resolve 时我们也不仅仅局限于记录值，同时也会记录状态 fulfilled。当所有的 Promise 对象都已决（解决或拒绝）后，我们统一 resolve 记录了值（value）已决状态（status）的数组。

function myPromiseAllSettled(promise) {
  let result = [];
  let count = 0;
  return new Promise(resolve => {
    // 执行所有的 Promise 对象
    promise.forEach(item => {
      Promise.resolve(item)
        .then(res => {
          // 当有 Promise 被 resolve 之后，记录 resolve 值和状态，已决 Promise 计数加一
          result.push({ status: "fulfilled", value: res });
          count++;
          if (count == promise.length) {
            // 全部 Promise 已决，resolve
            resolve(result);
          }
        })
        .catch(err => {
          // 当有 Promise 被 reject 后，记录 reject 值和状态，并且已决的 Promise 计数加一
          result.push({ status: "rejected", value: err });
          count++;
          if (count == promise.length) {
            // 全部 Promise 已决，resolve
            resolve(result);
          }
        });
    });
  });
}

转载于: https://blog.csdn.net/qq_42552393/article/details/117000022#comments_16549335

前端-阿辉
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小程序api实现promise封装过程解析
10-15
主要介绍了小程序api实现promise封装过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Promise常用API介绍
qq_52788258的博客
11-13 2365
1.Promise构造函数: Promise (excutor){} 2.Promise.prototype.then方法:(onResolved, onRejected) =>{} 3.Promise.prototype.catch方法:(onRejected)=>{} 4.Promise.resolve方法: (value) =>{} 5.Promise.reject方法: (reason) =>{} 6.Promise.all方法:(promises)=> {} 7.Promise.race 方法
Promise对象基本API介绍
果车的博客
03-30 1480
目录 一、含义： 二、Promise对象的特点： 1、对象的状态不受外界影响。 2、一旦状态改变、就不会再变，任何时候都可以得到这个结果。 3、避免了层层嵌套的回调函数，解决回调地狱的问题。 三、基本用法： 1、Promise对象是一个构造函数，用来生成Promise的实例。 2、Promise实例生成以后，可以用then方法分别指定Resolved状态和Rejected状态的回调函数。 3、在Promise实例中调用resolve()或者reject()，应该在前面加上return.
Promise处理异步操作的基本知识及常用api举例
最新发布
chen_ac的博客
04-07 572
promise处理异步操作的基本知识及常用api举例
手写Promise的基本实现 （超详细）
qq_48554377的博客
09-22 7134
手写Promise的基本实现 （超详细） 面试必备！ 本文带大家实现一个基本的 promise 过多的边界情况就不在考虐,理解主要实现过程以及逻辑即可 对于一个个出现的问题我会逐步分析原因以及对应的解决思路
PromiseA+规范解读和手promise写部分代码
wendyGao_Yin的博客
04-30 541
PromiseA+ promise用法和原理可以参照另一篇文章：Promise的底层详解、应用及扩展。 PromiseA+规范官网：https://promisesaplus.com/ Promise是ES6中的内置类，是用来解决异步编程的，但是兼容性很差【自行去https://www.caniuse.com/?search=Promise查看】。 ...
常用的promise API
初郁
03-08 4379
Promise构造函数: Promise (excutor) {} excutor函数: 同步执行 (resolve, reject) => {} resolve函数: 内部定义成功时我们调用的函数 value => {} reject函数: 内部定义失败时我们调用的函数 reason => {} 说明: excutor会在Promise内部立即同步回调,异步操作在执行器中执行 Promise.prototype.then方法: (onResolved, onRejected) ..
承诺：JS Promise API的Golang实现
02-16
承诺 JS Promise API的Golang实现
node.js中使用q.js实现api的promise化
10-25
主要介绍了node.js中使用q.js实现api的promise化,promise一个标准,它描述了异步调用的返回结果,包括正确返回结果和错误处理,需要的朋友可以参考下
vue实现的请求服务器端API接口示例
12-11
本文实例讲述了vue实现的请求服务器端API接口。分享给大家供大家参考，具体如下： import axios from 'axios' import router from '@/router' axios.defaults.timeout = 3000 axios.defaults.baseURL = '' axios....
手写 Promise 全部 API 教程
frontend_frank的博客
02-22 335
前言我们在 上篇文章用了很大功夫实现了 Promise 的核心方法，并且通过了 Promises/A+ 官方872个测试用例测试，接下来实现这些静态方法已经是小菜一碟了，因为这些 API...
手动实现Promise方法（原理）
04-23 1168
我们在使用Promise，为了解决异步操作，去实现同步代码的作用 平时开发时候，我们很多时候，需要等待接口返回后，去做一些处理，或者借用返回值，再调用，，如果用传统的方法，我们容易陷入回调地狱的问题，代码的可读性也不是很好 现在我们来看下Promise的原理，是如何实现的 1、Promise是一个类，执行这个类的时候，需要传入一个执行器进去，执行器立即执行 class myPromise{ // executor执行器 constructor(executor){
promise 的 API
NXZ13419918873的博客
12-05 594
Promise.prototype.then : 实例方法，为 Promise 注册回调函数，函数形式：fn(vlaue){}，value 是上一个任务的返回结果，then 中的函数一定要 return 一个结果或者一 个新的 Promise 对象，才可以让之后的 then 回调接收。Promise.race ：类方法，多个 Promise 任务同时执行，返回最先执行结束的 Promise 任务的结果，不管这个 Promise 结果是成功还是失败。
Promise（手动实现）
风起
09-25 804
文章目录1. `Promise`1.1 `Promise` 的 基本使用1.1.1 创建1.1.2 静态方法1.1.3` then`、`catch`1.1.4 `finally`1.2 `Promise`实现1.2.1 确定成员函数和成员变量1.2.2 准备工作1.2.3 定义状态1.2.4 定义`MP`的结构1.2.5 实现`MpPrototype`1.2.5.1 实现`resolve`和`reject`函数1.2.5.2 实现`then`1.2.5.3 进一步完善`resolve`和`reject`函数
Promise学习（二）一篇文章带你快速了解Promise中的常用API
min的博客
07-25 612
Promise常用的API，以及一些新增的API方法，Promise 构造函数，Promise.prototype.then，Promise.prototype.catch，Promise.resolve，reject，all，race，any，allSettled，Promise.prototype.finally，
Promise--相关的API
天行健 君子以自强不息，地势坤 君子以厚德载物。
07-21 641
1. Promise相关的API 1.1 Promise 构造函数 Promise 构造函数: Promise (excutor) {} (1) executor 函数: 执行器 (resolve, reject) => {} (2) resolve 函数: 内部定义成功时我们调用的函数 value => {} (3) reject 函数: 内部定义失败时我们调用的函数 reason => {} 说明: executor 会在 Promise 内部立即同步调用,异步操作在执行器中
ES6 --- Promise深入学习（五）Promise 内置的6个API，all，allSettled，race，any，resolve/reject
秋天，黄叶坠地，凉风有信。
03-03 1132
Promise API 在 Promise 类中，有 6 种静态方法。我们在这里简单介绍下它们的使用场景。 Promise.all 假设我们希望并行执行多个 promise，并等待所有 promise 都准备就绪。 例如，并行下载几个 URL，并等到所有内容都下载完毕后再对它们进行处理。 这就是 Promise.all 的用途。 语法： let promise = Promise.all([...promises...]); Promise.all 接受一个 promise 数组作为参数（从技术上讲，它可
Promise常用API
weixin_37722222的博客
09-04 1568
Promise 的常用 API 如下： Promise.resolve(value) 类方法，该方法返回一个以 value 值解析后的 Promise 对象 1、如果这个值是个 thenable（即带有 then 方法），返回的 Promise 对象会“跟随”这个 thenable 的对象，采用它的最终状态（指 resolved/rejected/pending/settled） 2、如果传入...
从回调地狱到Promise天堂：前端异步革命
会思想的苇草i的博客
01-28 1235
在前端开发中，Promise是一种用于处理异步操作的对象，可简化回调函数嵌套，有效管理复杂的异步代码。通过Promise，可以更清晰地表达和处理异步操作的结果，避免回调地狱问题，提高代码的可读性和可维护性。掌握Promise能够改善前端开发中的异步编程体验，实现更流畅的代码逻辑。
API Promise 化
08-24
小程序官方提供的异步API通常是基于回调函数实现的，在使用大量回调函数时容易导致回调地狱的问题，代码的可读性和可维护性也会受到影响。通过将这些异步API进行Promise化，可以更好地解决这些问题。...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值