300秒带你手写一个promise

科技前沿 • 2025-02-06 18:16 • 阅读 50

大家好，我是讯享网，很高兴认识大家。

前言

为什么要写这一篇文章？

加深对promise的理解，以及再实际工作中的灵活运用。
知其然，知其所以然。
面试需要。（重点！！！）

1:声明promise

首先我们先来聊聊promise的几个特性：

一个promise有三种状态：pengding,fulfilled，rejected.
promise状态一旦被改变，就不允许被改变了。
new Promise构造函数接受一个函数参数，这个函数有两个参数分别为resole和reject函数。

其实代码很好写，我们就来检验以下resolve的参数是否能正确传递吧

const PENDING = "pengding"; const FUFILLED = "fulfilled"; const REJECTED = "rejected"; class MP { constructor(executor) { this.status = PENDING; this.value = null; executor(this.resolve, this.reject); } resolve(value) { this.value = value; console.log("resolve:" + this.value); } reject(season) {} } // test new MP((resolve, reject) => { resolve("你好"); });

讯享网

打开控制台，我们发现无法设置属性value,

讯享网查看代码我们很容易发现其实代码this绑定的问题，我们用bind绑定以下就好了。

this问题解决了，但是还有一个问题，状态只能改变一次。所以我们在resolve和reject函数执行的时候要判断一下状态。

讯享网const PENDING = "pengding"; const FUFILLED = "fulfilled"; const REJECTED = "rejected"; class MP { constructor(executor) { this.status = PENDING; this.value = null; executor(this.resolve.bind(this), this.reject.bind(this)); } resolve(value) { if(this.status == PENDING){ this.status = FUFILLED; this.value = value; console.log("resolve:" + this.value); } } reject(season) { if (this.status == PENDING) { this.status = REJECTED; this.value = season; console.log("reject:" + this.value); } } } // test new MP((resolve, reject) => { resolve("你好"); });

2:then的基础构建

2.1:then的用法

接受两个参数，当promise成功执行第一个函数参数，失败执行第二个函数参数。
then里面也可以不传参数。
then里面的函数为异步操作。（promise是微任务）

then(onFulfilled, onRejected) { // 判断两个参数是不是函数类型，如果不是函数，需要手动封装，否则下面执行时会报错。 if (typeof onFulfilled !== "function") { onFulfilled = () => {}; } else if (typeof onRejected !== "function") { onRejected = () => {}; } if (this.status === "fulfilled") { onFulfilled(this.value); } else if (this.status === "rejected") { onRejected(this.value); } else { } } // test new MP((resolve, reject) => { resolve("你好"); }).then( res => { console.log("then res", res); }, rej => { console.log(rej); } );

then可以接收到resolve传过来的数据。

2.2:异步操作（任务队列不懂的先去学学）

这里我们使用queueMicrotask来创建微任务：

讯享网then(onFulfilled, onRejected)

300秒带你手写一个promise

前言

1:声明promise

2:then的基础构建

2.1:then的用法

2.2:异步操作（任务队列不懂的先去学学）

相关推荐