promise学习——js手写promise

最新推荐文章于 2024-08-01 21:08:50 发布
最新推荐文章于 2024-08-01 21:08:50 发布
阅读量2.5k 收藏 8
点赞数 6
分类专栏： js 文章标签： javascript 前端
原文链接：https://zhuanlan.zhihu.com/p/183801144
版权

Promise 异步处理 链式调用 状态管理 回调地狱
关键词由CSDN通过智能技术生成

最近在看各种js手写集合，看到优秀的promise实现文章，特此转载记录，原文连接：原文出处

  • promise的出现是为了解决回调地狱的问题，此前为了拿到函数返回结果只能一层一层的嵌套，而promise的使用可以采用链式调用的形式，promise 正是用一种更加友好的代码组织方式，解决了异步嵌套的问题

在手写promise之前我们要明确一个promise应该包含了什么：
1、调用 Promise 时，会返回一个 Promise 对象
2、构建 Promise 对象时，需要传入一个 executor 函数，如果运行在 excutor 函数中的业务执行成功了，会调用 resolve 函数；如果执行失败了，则调用 reject 函数
3、Promise 的状态不可逆promise 有三个状态：pending、fulfilled、 rejected
4、Promise有value可以接收执行成功的值reason接收执行失败的值
5、Promise 必须有一个then方法，then 接收两个参数，分别是 promise 成功的回调 onFulfilled, 和 promise 失败的回调 onRejected

明确了上面的需求我们可以实现基本的功能，

// 三个状态：PENDING、FULFILLED、REJECTED
const PENDING = 'PENDING';
const FULFILLED = 'FULFILLED';
const REJECTED = 'REJECTED';

class Promise {
  constructor(executor) {
    // 默认状态为 PENDING
    this.status = PENDING;
    // 存放成功状态的值，默认为 undefined
    this.value = undefined;
    // 存放失败状态的值，默认为 undefined
    this.reason = undefined;

    // 调用此方法就是成功
    let resolve = (value) => {
      // 状态为 PENDING 时才可以更新状态，防止 executor 中调用了两次 resovle/reject 方法
      if(this.status ===  PENDING) {
        this.status = FULFILLED;
        this.value = value;
      }
    } 

    // 调用此方法就是失败
    let reject = (reason) => {
      // 状态为 PENDING 时才可以更新状态，防止 executor 中调用了两次 resovle/reject 方法
      if(this.status ===  PENDING) {
        this.status = REJECTED;
        this.reason = reason;
      }
    }

    try {
      // 立即执行，将 resolve 和 reject 函数传给使用者  
      executor(resolve,reject)
    } catch (error) {
      // 发生异常时执行失败逻辑
      reject(error)
    }
  }

  // 包含一个 then 方法，并接收两个参数 onFulfilled、onRejected
  then(onFulfilled, onRejected) {
    if (this.status === FULFILLED) {
      onFulfilled(this.value)
    }

    if (this.status === REJECTED) {
      onRejected(this.reason)
    }
  }
}

测试：

const promise = new Promise((resolve, reject) => {
  resolve('返回结果成功');
}).then(
  (data) => {
    console.log('success', data)
  },
  (err) => {
    console.log('faild', err)
  }
)

//"success，返回结果成功"

但是此时我们实现的Promise只能执行同步操作，实际上我们在使用中异步操作才是我们常态，因此还要在上面实现的基础上添加一些操作

const PENDING = 'PENDING';
const FULFILLED = 'FULFILLED';
const REJECTED = 'REJECTED';

class Promise {
  constructor(executor) {
    this.status = PENDING;
    this.value = undefined;
    this.reason = undefined;
    // 存放成功的回调
    this.onResolvedCallbacks = [];
    // 存放失败的回调
    this.onRejectedCallbacks= [];

    let resolve = (value) => {
      if(this.status ===  PENDING) {
        this.status = FULFILLED;
        this.value = value;
        // 依次将对应的函数执行
        this.onResolvedCallbacks.forEach(fn=>fn());
      }
    } 

    let reject = (reason) => {
      if(this.status ===  PENDING) {
        this.status = REJECTED;
        this.reason = reason;
        // 依次将对应的函数执行
        this.onRejectedCallbacks.forEach(fn=>fn());
      }
    }

    try {
      executor(resolve,reject)
    } catch (error) {
      reject(error)
    }
  }

  then(onFulfilled, onRejected) {
    if (this.status === FULFILLED) {
      onFulfilled(this.value)
    }

    if (this.status === REJECTED) {
      onRejected(this.reason)
    }

    if (this.status === PENDING) {
      // 如果promise的状态是 pending，需要将 onFulfilled 和 onRejected 函数存放起来，等待状态确定后，再依次将对应的函数执行
      this.onResolvedCallbacks.push(() => {
        onFulfilled(this.value)
      });

      // 如果promise的状态是 pending，需要将 onFulfilled 和 onRejected 函数存放起来，等待状态确定后，再依次将对应的函数执行
      this.onRejectedCallbacks.push(()=> {
        onRejected(this.reason);
      })
    }
  }
}

在执行异步任务的时候，promise状态未改变之前将对应的函数放到对应的数组中，等待状态改变时执行
测试：


const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('返回的成功结果');
  },1000);
}).then(
  (data) => {
    console.log('success', data)
  },
  (err) => {
    console.log('faild', err)
  }
)

//"success, 返回的成功结果"

解决了异步执行问题，我们需要考虑下Promise的链式调用，Promise的链式调用值有穿透性，只要return了就能在下一个then取到
思路：

  1. onFulfilled 或者 onRejected不是函数，将其忽略，且依旧可以在下面的 then 中获取到之前返回的值
  2. 每次执行完 promise.then 方法后返回的都是一个新的promise
  3. 如果then返回的是一个普通值，则将这个普通值传递给下一个then的成功回调
  4. 抛出异常时将异常传递给下一个then的失败回调
const PENDING = 'PENDING';
const FULFILLED = 'FULFILLED';
const REJECTED = 'REJECTED';

const resolvePromise = (promise2, x, resolve, reject) => {
  // 自己等待自己完成是错误的实现，用一个类型错误，结束掉 promise  Promise/A+ 2.3.1
  if (promise2 === x) { 
    return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
  }
  // Promise/A+ 2.3.3.3.3 只能调用一次
  let called;
  // 后续的条件要严格判断 保证代码能和别的库一起使用
  if ((typeof x === 'object' && x != null) || typeof x === 'function') { 
    try {
      // 为了判断 resolve 过的就不用再 reject 了（比如 reject 和 resolve 同时调用的时候）  Promise/A+ 2.3.3.1
      let then = x.then;
      if (typeof then === 'function') { 
        // 不要写成 x.then，直接 then.call 就可以了 因为 x.then 会再次取值，Object.defineProperty  Promise/A+ 2.3.3.3
        then.call(x, y => { // 根据 promise 的状态决定是成功还是失败
          if (called) return;
          called = true;
          // 递归解析的过程（因为可能 promise 中还有 promise） Promise/A+ 2.3.3.3.1
          resolvePromise(promise2, y, resolve, reject); 
        }, r => {
          // 只要失败就失败 Promise/A+ 2.3.3.3.2
          if (called) return;
          called = true;
          reject(r);
        });
      } else {
        // 如果 x.then 是个普通值就直接返回 resolve 作为结果  Promise/A+ 2.3.3.4
        resolve(x);
      }
    } catch (e) {
      // Promise/A+ 2.3.3.2
      if (called) return;
      called = true;
      reject(e)
    }
  } else {
    // 如果 x 是个普通值就直接返回 resolve 作为结果  Promise/A+ 2.3.4  
    resolve(x)
  }
}

class Promise {
  constructor(executor) {
    this.status = PENDING;
    this.value = undefined;
    this.reason = undefined;
    this.onResolvedCallbacks = [];
    this.onRejectedCallbacks= [];

    let resolve = (value) => {
      if(this.status ===  PENDING) {
        this.status = FULFILLED;
        this.value = value;
        this.onResolvedCallbacks.forEach(fn=>fn());
      }
    } 

    let reject = (reason) => {
      if(this.status ===  PENDING) {
        this.status = REJECTED;
        this.reason = reason;
        this.onRejectedCallbacks.forEach(fn=>fn());
      }
    }

    try {
      executor(resolve,reject)
    } catch (error) {
      reject(error)
    }
  }

  then(onFulfilled, onRejected) {
    //解决 onFufilled，onRejected 没有传值的问题
    //Promise/A+ 2.2.1 / Promise/A+ 2.2.5 / Promise/A+ 2.2.7.3 / Promise/A+ 2.2.7.4
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : v => v;
    //因为错误的值要让后面访问到，所以这里也要跑出个错误，不然会在之后 then 的 resolve 中捕获
    onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err };
    // 每次调用 then 都返回一个新的 promise  Promise/A+ 2.2.7
    let promise2 = new Promise((resolve, reject) => {
      if (this.status === FULFILLED) {
        //Promise/A+ 2.2.2
        //Promise/A+ 2.2.4 --- setTimeout
        setTimeout(() => {
          try {
            //Promise/A+ 2.2.7.1
            let x = onFulfilled(this.value);
            // x可能是一个proimise
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            //Promise/A+ 2.2.7.2
            reject(e)
          }
        }, 0);
      }

      if (this.status === REJECTED) {
        //Promise/A+ 2.2.3
        setTimeout(() => {
          try {
            let x = onRejected(this.reason);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e)
          }
        }, 0);
      }

      if (this.status === PENDING) {
        this.onResolvedCallbacks.push(() => {
          setTimeout(() => {
            try {
              let x = onFulfilled(this.value);
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e)
            }
          }, 0);
        });

        this.onRejectedCallbacks.push(()=> {
          setTimeout(() => {
            try {
              let x = onRejected(this.reason);
              resolvePromise(promise2, x, resolve, reject)
            } catch (e) {
              reject(e)
            }
          }, 0);
        });
      }
    });

    return promise2;
  }
}
老古懂
关注
专栏目录
手写Promise系列之——all
wuxian_wj的博客
02-16 580
面试过程中少不了手写题，而promise相关的手写题也是很经常被问到，这里就来整理一下promise手写系列。 整个系列预计有以下几个函数的手写文章，今天先来实现all函数 all any race allSettled resolve+reject promise手写实现 Promise.all作用 Promise.all()方法用于将多个Promise实例包装成一个新的Promise实例。 const a = Promise.all([p1, p2, p3]) 最终a的状态由p1,p2,p3决定。
ES6系列——纯js手写一个异步操作（promise,async 函数），模拟请求接口
qq_43305958的博客
08-26 1344
纯js手写一个异步操作（promise），模拟请求接口一、异步操作是什么？二、使用步骤1.promise2.async 函数总结 一、异步操作是什么？ 异步模式不用阻塞当前线程来等待其他任务的完成，而是允许当前线程继续执行后面的操作，当异步操作完成后，再去执行回调操作，这样做的好处就是避免其他操作执行的时间太长而使当前线程长时间等待 二、使用步骤 1.promise 代码如下（示例）： samulation() { let promise = new Promise((resolve, rej
JS手写一个自定义Promise操作示例
10-15
主要介绍了JS手写一个自定义Promise操作,结合实例形式分析了JS自定义Promise的实现与使用相关操作技巧,需要的朋友可以参考下
js-手写Promise
qq_32644987的博客
06-12 1023
1、Promise 创建MyPromise.js文件，在里面进行MyPromise逻辑处理 我们先看原生Promise的使用： new Promise((resolve,reject) => { }) 有代码可以看出：原生Promise通过new创建Promise对象，然后传入两个函数resolve、reject参数用于后续执行； 好的，那我们从这方面开始手写MyPromise。 首先，需要通过new创建对象，那就需要在内部实现构造函数 其次构造函数需要传入两个函数作为执行者 Pormi
Javascript 手写一个Promise
最新发布
警警的博客
08-01 734
回调函数中嵌套回调）（1）对象的不受外界影响。Promisepending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。（2）。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为。如果改变已经发生了，你再对Promise。
JavaScript手写Promise
奋斗在路上
02-14 388
Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及其返回的值。 Promise 对象是一个代理对象（代理一个值），被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers）。 这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的promise对象 一个 Promise有...
js之手写promise
qq_42744920的博客
09-12 223
手写promise
JS手写Promise（详细过程）
m0_56698268的博客
03-28 1997
手写Promise
js代码-利用promise 手写一个限制最大并发的类
07-14
本主题聚焦于如何利用Promise来手写一个类，这个类可以限制并发执行的任务数量，这对于优化资源利用和防止服务器过载来说至关重要。 首先，让我们了解Promise的基本概念。Promise代表一个异步操作的最终完成或失败...
手写Promise——自己封装Promise对象
qq_42586895的博客
03-08 4441
自己封装一个Promise 代码：https://github.com/fu-x/promise 首先我们需要对Promise进行分析 声明一个MyPromise类 class MyPromise {} // 声明MyPromise类 Promise的三种状态：pending、fulfilled、rejected 我们要在类里定义三个静态常量 static PENDING = 'pendin...
前端手写(十八)——Promise并行限制
weixin_47450807的博客
03-31 1144
一、写在前面 一般我们做多个异步请求，此时我们常常采用的是Promise.all来进行处理，Promise.all会全部的一起执行，但是如果存在一些并行的限制，也就是说一次最多只能执行固定的数量，此时该如何做。这个比较类似于requestAnimationFrameapi,其使用的是递归，当上一帧指向完毕后，就会执行下一帧。保证帧与帧之间的紧密关系。 二、具体实现 class Scheduler { constructor() { //整个队列，存放任务的队列 this.queue =
js手写promise
yuanqi3131的博客
12-28 497
JS手写Promise Promise是异步编程的一种解决方案，简单的来说，Promise作为一个容器，保存着某个未来才会结束的事件的结果。 Promise有两个特点： 1）对象的状态不受外界影响。Promise有三种状态：pengding（进行中），fulfilled（完成），rejected（失败），只有异步操作的结果，可以决定当前是哪一个状态。 2）一旦状态改变，就不再改变。 class MyPromise { static PENDING = 'pending'; static F
JS手写一个promise方法
IT913913的博客
04-12 428
手写一个promise是理解异步的一个基础
JS详解-手写Promise！！！
IIIIIAN
04-04 1520
针对js的深入理解，作者学习并撰写以下文章，由于理解认知有限难免存在偏差，请大家指正！所有定义来自mdn。对象表示异步操作最终的完成（或失败）以及其结果值.描述：一个 Promise是一个代理，它代表一个在创建 promise 时不一定已知的值。它允许你将处理程序与异步操作的最终成功值或失败原因关联起来。这使得异步方法可以像同步方法一样返回值：异步方法不会立即返回最终值，而是返回一个promise，以便在将来的某个时间点提供该值。
js 手写 Promise
weixin_30701521的博客
04-28 150
/* * pending:初始化成功 * fulfilled:成功 * rejected：失败 * */ function Promise(cback){ this.status = 'pending'; this.value = undefined this.reason = undefined this.fulfille...
【JavaScript】手写Promise
编码世界
05-15 4665
面试中经常会被问到你会手写Promise吗？本文带你手撸Promsie
js-手写promise
lovepink527的博客
06-10 300
手写promise以及promise的静态实例方法all、allsettled、any、resolve、reject以及promise实例方法catch、finally
js手写promise。
ranshakalove的博客
07-21 127
js手写promise。
Javascript-手写Promise（超详细，适合小白～）
weixin_72188701的博客
09-01 485
Javascipt 面试必会的promise源码手写
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值