美文网首页
手写一个 Promise

手写一个 Promise

作者: 蓝醇 | 来源:发表于2019-06-05 13:34 被阅读0次
  const PENDING = "pending";
  const RESOLVE = "resolve";
  const REJECT = "reject";

  function MyPromise(fn) {
    const that = this;
    that.status = PENDING; // MyPromise 内部状态
    that.value = null; // 传入 resolve 和 reject 的值
    that.resolveCallbacks = []; // 保存 then 中resolve的回调函数
    that.rejectCallbacks = []; // 保存 then 中reject的回调函数

    // resolve 函数 Promise内部调用 resolve 函数 例:new MyPromise((resolve,reject)=>{resolve(1)})
    function resolve(val) {
      if (that.status === PENDING) {
        that.status = RESOLVE;
        that.value = val;
        that.resolveCallbacks.forEach(cb => cb(that.value));
      }
    }
    // reject 函数 Promise内部调用的 reject 函数 例:new MyPromise((resolve,reject)=>{reject(1)})
    function reject(val) {
      if (that.status === PENDING) {
        that.status = REJECT;
        that.value = val;
        that.rejectCallbacks.forEach(cb => cb(that.value));
      }
    }
    // 调用传入 MyPromise 内的方法 例:new MyPromise((resolve,reject)=>{})   fn=(resolve,reject)=>{}
    try {
      fn(resolve, reject);
    } catch (error) {
      reject(error);
    }
  }
  // 在原型上添加then方法
  MyPromise.prototype.then = function(onFulfilled, onRejected) {
    const that = this;
    // 判断传入的是否为函数
    onFulfilled = typeof onFulfilled === "function" ? onFulfilled : v => v;
    onRejected =
      typeof onRejected === "function"
        ? onRejected
        : r => {
            throw r;
          };

    //如果 Promise 内部存在异步代码,调用then方法时,此时 promise 内部还是 PENDING 状态,将 then 里面的函数添加进回调数组,当异步处理完成后调用 MyPromise 内部的 resolve 或者 reject 函数
    if (that.status === PENDING) {
      that.resolveCallbacks.push(onFulfilled);
      that.rejectCallbacks.push(onRejected);
    }

    // 当 Promise 内部的状态已经为 resolve,则调用 then 里面的函数并传递值
    if (that.status === RESOLVE) {
      onFulfilled(that.value);
    }

    // 当 Promise 内部状态为 reject,则调用then里的回调函数并传递值
    if (that.status === REJECT) {
      onRejected(that.value);
    }
  };

  // 测试自己实现的Promise
  new MyPromise((resolve, reject) => {
    setTimeout(() => {
      resolve(1);
    }, 0);
  }).then(
    res => {
      console.log(res);
    },
    err => {}
  );

相关文章

  • 手写Promise

    手写 Promise 我们会通过手写一个符合 Promise/A+ 规范的 Promise 来深入理解它,并且手写...

  • 手写promise

    手写promise 带大家手写一个 promis。在手写之前我会先简单介绍一下为什么要使用promise、prom...

  • es5 手写promise

    参考自 前端精髓--手写一个Promise

  • 手写 Promise 系列 --- 3

    在前两篇(手写 Promise 系列 --- 1)和(手写 Promise 系列 ---2) 中,达成了3个目标 ...

  • 手写Promise

    $ 正常的promise用法   $ 手写的Promise   # 测试可行性

  • 纯手写实现自己的nodejs promise 库

    纯手写实现自己的nodejs promise 库什么是Promise?promise 链Async/Await后续...

  • 手写基础 promise

    1. 前言 玩下吧 手写 promise,看看能写成啥样 2. promise 基础结构 3. 手写`promi...

  • 手写promise

    promise 手写 代码来源:darrell-wheels promise 30分钟,带你实现一个符合规范的 P...

  • JS常见手写代码题(二)

    1、用闭包手写一个cache工具 2、手写一个简易的JQuery,考虑插件和扩展性 3、手写Promise加载一张...

  • 手写简易Promise

    promise的用法 手写promise需要注意的地方1)接受一个函数(后文称为executor函数)作为参数,e...

网友评论

      本文标题:手写一个 Promise

      本文链接:https://www.haomeiwen.com/subject/uegjxctx.html