来用Vite+React快速开发浏览器插件

前言

在我们面试前端开发工程师中，我们都逃不过的一个问题就是异步代码的解决方案。而在异步解决中，我们最常见的手段就是用Promise解决。但只会用Promise是远远不够的，我们还得更深层次的去了解Promise实现，下面我们就来实现一个手写简化版的Promise吧。

第一步：搭建Promise框架

(function(window) {// 值执行函数//在promise原型上挂载then方法
    myPromise.prototype.then = function(onResolved, onRejected) {} function MyPromise(executor){ // 构建promise函数function resolve(value){} // promise内部的resolve函数function reject(value){}try{ executor(resolve, reject)//参数为实参}catch(error){// 如果promise内代码执行出错，将错误抛出reject(error)}} window.myPromise = myPromise //将promise挂载到window全局对象上 
})(window) 
1
2
3

首先我们要了解Promise函数中帮我们干了啥事：

• 1.有一个promise构造函数
• 2.可以在promise后可以接.then()函数
• 3.接收了一个有两个参数的回调函数
• 4.参数在promise中作为函数调用

这就是promise帮我干的事情，所以我们也就根据它帮我们干的事，我们来搭建promise框架。

• 1.先写一个promise构造函数
• 2.在promise构造函数的原型上写.then()方法
• 3.在promise函数把传进来的参数作为函数调用掉，同时将我们在promise写的函数作为实参传进去给回调函数使用
• 4.在promise中定义这两个函数，供回调函数调用

第二步：明确Promise状态的变更

在我们使用Promise，我们需要知道的一个很重要的知识点就是，Promise现在是处于什么状态？首先我们要知道Promise有三种状态：

• pending
• resloved（fulfilled）
• rejected

接下来我们再来看看Promise状态的特点：

1.Promise对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。2.一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。在明确完Promise的状态后，我们也就明白了我们需要在resolve和reject函数中需要去改变Promise