js：手写一个promise

背景

promise 作为前端开发中常用的函数，解决了 js 处理异步时回调地狱的问题，大家应该也不陌生了，今天来学习一下 promise 的实现过程，这样可以加（面）深（试）理（要）解（考）。

需求

我们先来总结一下 promise 的特性：
使用：

const p1 = new Promise((resolve, reject) => {
  console.log('1');
  resolve('成功了');
})

console.log("2");

const p2 = p1.then(data => {
  console.log('3')
  throw new Error('失败了')
})

const p3 = p2.then(data => {
  console.log('success', data)
}, err => {
  console.log('4', err)
})

在这里插入图片描述
在这里插入图片描述
以上的示例可以看出 promise 的一些特点，也就是我们本次要做的事情：

  • 在调用 Promise 时，会返回一个 Promise 对象，包含了一些熟悉和方法（all/resolve/reject/then…）
  • 构建 Promise 对象时，需要传入一个 executor 函数，接受两个参数，分别是resolve和reject，Promise 的主要业务流程都在 executor 函数中执行。
  • 如果运行在 excutor 函数中的业务执行成功了，会调用 resolve 函数；如果执行失败了，则调用 reject 函数。
  • promise 有三个状态：pending，fulfilled，rejected，默认是 pending。只能从pending到rejected, 或者从pending到fulfilled，状态一旦确认，就不会再改变；
  • promise 有一个then方法，接收两个参数，分别是成功的回调 onFulfilled, 和失败的回调 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)
  }
)

在这里插入图片描述
这个时候我们很开心，但是别开心的太早，promise 是为了处理异步任务的，我们来试试异步任务好不好使：

const promise = new Promise((resolve, reject) => {
  // 传入一个异步操作
  setTimeout(() => {
    resolve('成功');
  },1000);
}).then(
  (data) => {
    console.log('success', data)
  },
  (err) => {
    console.log('faild', err)
  }
)

发现没有任何输出，我们来分析一下为什么：
new Promise 执行的时候，这时候异步任务开始了，接下来直接执行 .then 函数，then函数里的状态目前还是 padding，所以就什么也没执行。

那么我们想想应该怎么改呢？
我们想要做的就是，当异步函数执行完后，也就是触发 resolve 的时候，再去触发 .then 函数执行并把 resolve 的参数传给 then。

这就是典型的发布订阅的模式，可以看我 这篇 文章。

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);
      })
    }
  }
}

这下再进行测试：

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

1s 后输出了：
在这里插入图片描述
说明成功啦

then的链式调用

这里就不分析细节了，大体思路就是每次 .then 的时候重新创建一个 promise 对象并返回 promise，这样下一个 then 就能拿到前一个 then 返回的 promise 了。

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

核心就是有一个失败则失败，全成功才进行 resolve

Promise.all = function(values) {
  if (!Array.isArray(values)) {
    const type = typeof values;
    return new TypeError(`TypeError: ${type} ${values} is not iterable`)
  }
  return new Promise((resolve, reject) => {
    let resultArr = [];
    let orderIndex = 0;
    const processResultByKey = (value, index) => {
      resultArr[index] = value;
      if (++orderIndex === values.length) {
          resolve(resultArr)
      }
    }
    for (let i = 0; i < values.length; i++) {
      let value = values[i];
      if (value && typeof value.then === 'function') {
        value.then((value) => {
          processResultByKey(value, i);
        }, reject);
      } else {
        processResultByKey(value, i);
      }
    }
  });
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/9650.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

第八天并发编程篇

第八天并发编程篇

一、简述线程、进程、程序的基本概念&#xff1f; 1.进程&#xff1a; 我们把运行中的程序叫做进程,每个进程都会占用内存与CPU资源,进程与进程之间互相独立. 2.线程&#xff1a; 线程就是进程中的一个执行单元&#xff0c;负责当前进程中程序的执行。一个进程可以包含多个线程…
阅读更多...
Matlab在线IDE：计算定积分上限

Matlab在线IDE：计算定积分上限

上一篇文章&#xff1a;Matlab在线IDE&#xff1a;MATLAB Online介绍与计算定积分案例 1、案例介绍 % 定义符号变量 x syms x;% 定义函数 f(x) x f x;% 定义定积分的值 I I 2;% 计算函数 f(x) 在 [0, x] 区间的定积分&#xff0c;并求其反函数 F(x) F finverse(int(f, 0, …
阅读更多...
【hello Linux】Linux软件管理器yum

【hello Linux】Linux软件管理器yum

目录 1.Linux软件管理器yum 1.1 关于lrzsz 1.2 使用yum时的注意事项 1.3 查看软件包&#xff1a;yum list 1.4 安装软件&#xff1a;yum install 1.5 卸载软件&#xff1a;yum remove 1.6 更新yum源 1.7 实战项目 Linux&#x1f337; 1.Linux软件管理器yum 在windows系统下有应…
阅读更多...
ROS学习——艰辛的环境安装之路一Ubuntu

ROS学习——艰辛的环境安装之路一Ubuntu

文章目录Ubuntu安装和下载页面设置安装Vmware Tools安装VSCODE用几个常用命令简单熟悉下UbuntuUbuntu 安装和下载 Ubuntu的安装和下载 看这个链接 Ubuntu安装和下载1 或者这个链接 Ubuntu安装和下载2 页面设置 安装Vmware Tools 看这个链接 VMware Tools的介绍和安装 安装…
阅读更多...
超详细从入门到精通，pytest自动化测试框架实战-pytest插件的开发（八）

超详细从入门到精通，pytest自动化测试框架实战-pytest插件的开发（八）

目录&#xff1a;导读前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09;前言 pytest框架采用的是…
阅读更多...
3年测试经验只会“点点点”，不会自动化即将面临公司淘汰？沉淀100天继续做测试

3年测试经验只会“点点点”，不会自动化即将面临公司淘汰？沉淀100天继续做测试

前段时间一个朋友跟我吐槽&#xff0c;说自己做软件测试工作已经3年了&#xff0c;可这三年自己的能力并没有得到提升&#xff0c;反而随着互联网的发展&#xff0c;自己只会“点点点”的技能即将被淘汰。说自己很苦恼了&#xff0c;想要提升一下自己&#xff0c;可不知道该如何…
阅读更多...
简单的做一个学校毕业啊项目

简单的做一个学校毕业啊项目

前言&#xff1a;相信看到这篇文章的小伙伴都或多或少有一些编程基础&#xff0c;懂得一些linux的基本命令了吧&#xff0c;本篇文章将带领大家服务器如何部署一个使用django框架开发的一个网站进行云服务器端的部署。 文章使用到的的工具 Python&#xff1a;一种编程语言&…
阅读更多...
每日一练——Day 13

每日一练——Day 13

前言&#xff1a; 小亭子正在努力的学习编程&#xff0c;接下来将开启编程题的练习~~ 分享的文章都是学习的笔记和感悟&#xff0c;如有不妥之处希望大佬们批评指正~~ 同时如果本文对你有帮助的话&#xff0c;烦请点赞关注支持一波, 感激不尽~~ 第一题 题目描述&#xff1a; 刷…
阅读更多...
SpringBoot基础学习之(十二):通过spring boot框架连接MySql数据库（通过idea中的工具Database连接Mysql数据库）

SpringBoot基础学习之(十二):通过spring boot框架连接MySql数据库（通过idea中的工具Database连接Mysql数据库）

Springboot这个系列实现的案例&#xff1a;员工后台管理系统 之前讲解的内容是前后端的交互&#xff0c;并没有涉及到数据库。把员工信息放置在一个数组中&#xff0c;实现的方法则是对数组的增删改查操作&#xff0c;但是从今天开始&#xff0c;实现的功能则是在数据库的基础上…
阅读更多...
Qt Quick - ToolTip

Qt Quick - ToolTip

Qt Quick - ToolTip使用总结一、概述二、附带的ToolTip三、延迟和超时四、自定义ToolTip五、定制化一、概述 ToolTip 其实就是ToolTip&#xff0c;所谓ToolTip其实就是一段简短的文本&#xff0c;告知用户控件的功能。它通常置于父控件之上或之下。提示文本可以是任何富文本格…
阅读更多...
为什么程序员都喜欢开源的软件?

为什么程序员都喜欢开源的软件?

先来感受一下开源与闭源&#xff1a; 当你觉得这个软件有一个缺点影响使用的时候 如果是闭源软件&#xff0c;你如果不想自己模仿着写一个&#xff0c;就只能考虑顺着网线到开发者脖子上逼着他加 但开源软件你可以自己在他的基础上改一改&#xff0c;你改好了还拿回馈回去让…
阅读更多...
动力节点王鹤SpringBoot3笔记——第七章 视图技术Thymeleaf

动力节点王鹤SpringBoot3笔记——第七章 视图技术Thymeleaf

目录 第七章 视图技术Thymeleaf 前言 7.1 表达式 7.2 if-for 第七章 视图技术Thymeleaf 前言 Thymeleaf 是一个表现层的模板引擎&#xff0c; 一般被使用在 Web 环境中&#xff0c;它可以处理 HTML, XML、 JS 等文档&#xff0c;简单来说&#xff0c;它可以将 JSP 作…
阅读更多...
将Mircrosoft Store下载的Ubuntu安装到指定位置方法，同时解决“你需要来自System的权限才能对此文件进行更改”问题

将Mircrosoft Store下载的Ubuntu安装到指定位置方法，同时解决“你需要来自System的权限才能对此文件进行更改”问题

一、概述 最近使用到WIndows的WSL功能&#xff0c;需要安装ubuntu这个子系统进行仿真环境搭建&#xff0c;但是又不愿意使用虚拟机&#xff0c;不太方便。在安装过程中发现本身就岌岌可危的C盘经常突然爆满&#xff0c;经过检查发现是安装ubuntu位置的问题。但是在系统更改存储…
阅读更多...
网络安全从业人员应该如何提升自身的web渗透能力?

网络安全从业人员应该如何提升自身的web渗透能力?

前言 web 渗透这个东西学起来如果没有头绪和路线的话&#xff0c;是非常烧脑的。 理清 web 渗透学习思路&#xff0c;把自己的学习方案和需要学习的点全部整理&#xff0c;你会发现突然渗透思路就有点眉目了。 程序员之间流行一个词&#xff0c;叫 35 岁危机&#xff0c;&am…
阅读更多...
利用多专家模型解决长尾识别任务

利用多专家模型解决长尾识别任务

来源&#xff1a;投稿 作者&#xff1a;TransforMe 编辑&#xff1a;学姐 贡献 提出了RoutIng Diverse Experts&#xff08;RIDE&#xff09;&#xff0c;不仅可以减少所有类别的variance&#xff0c;并且还可以减少尾部类的bias。同时提升了头部和尾部的性能。 思路 目前存…
阅读更多...
nuxt.js 在IE浏览器||其他浏览不识别document/window 情况处理

nuxt.js 在IE浏览器||其他浏览不识别document/window 情况处理

1 第一步注册到nuxt.config.js文件 2 第二步建立js 文件 import Vue from vue (function(){ if(process.client){ console.log(process.client) }else{ console.log(process.client) } if (!!window.ActiveXObject || "ActiveXObject" i…
阅读更多...
Stable Diffusion：一种新型的深度学习AIGC模型

Stable Diffusion：一种新型的深度学习AIGC模型

潜在扩散模型 | AIGC| Diffusion Model 图片感知压缩 | GAN | Stable Diffusion 随着生成型AI技术的能力提升&#xff0c;越来越多的注意力放在了通过AI模型提升研发效率上。业内比较火的AI模型有很多&#xff0c;比如画图神器Midjourney、用途多样的Stable Diffusion&#…
阅读更多...
国货之光！打工人必装的8个软件，你都用过没？|办公|效率|创作

国货之光！打工人必装的8个软件，你都用过没？|办公|效率|创作

给大家分享8款非常强大&#xff0c;但知名度不高的国产软件&#xff0c;每一个都堪称精品&#xff0c;喜欢的话记得点赞和关注哦~ 第一款是 火绒安全软件 火绒安全软件没有任何&#xff0c;具有推广性质的弹窗、没有捆绑打扰用户的行为&#xff1b;占用资源极少&#xff0c;&a…
阅读更多...
腾讯空降测试工程师，绩效次次拿S，真是砂纸擦屁股，给我露了一手啊

腾讯空降测试工程师，绩效次次拿S，真是砂纸擦屁股，给我露了一手啊

​上周我们公司的绩效面谈全部结束了&#xff0c;每年到这个时间点就是打绩效的时候了&#xff0c;对于职场打工人来说绩效绝对是最重要的事情之一&#xff0c;原因也很简单&#xff1a;奖金、晋升、涨薪都和它有关系。 比如下面这个美团员工在脉脉上的自曝就很凄凉&#xff1…
阅读更多...
Python 操作 MongoDB 详解

Python 操作 MongoDB 详解

嗨害大家好鸭&#xff01;我是芝士❤ 一、前言 MongoDB属于 NoSQL&#xff08;非关系型数据库&#xff09;&#xff0c; 是一个基于分布式文件存储的开源数据库系统。 二、操作 MongoDB 1. 安装 pymongo python 使用第三方库来连接操作 MongoDB&#xff0c; 所以我们首先安…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发