Promise自定义封装

文作为本人学习总结之用，以笔记为主，同时分享给大家.
本篇文章是B站尚硅谷最新Promise视频的部分笔记
因为个人技术有限，如果有发现错误或存在疑问之处，欢迎指出或指点！不胜感谢！

基本原理

Promise 是一个类，在执行这个类的时候会传入一个执行器，这个执行器会立即执行

Promise 会有三种状态

Pending 等待
Fulfilled 完成
Rejected 失败

状态只能由 Pending --> Fulfilled 或者 Pending --> Rejected，且一但发生改变便不可二次修改；

Promise 中使用 resolve 和 reject 两个函数来更改状态；

then 方法内部做但事情就是状态判断

如果状态是成功，调用成功回调函数
如果状态是失败，调用失败回调函数

和上篇文章"Promise关键问题"

了解以上基本原理和关键问题之后，为手写Promise准备

一、Promise 基本实现
1.初始结构搭建
首先使用函数式编写便于理解
//Promise.js
//声明构造函数
function Promise(executor){
//resolve 函数
function resolve(data){}
//reject 函数
function reject(data){}

//同步调用『执行器函数』
executor(resolve, reject);

}

//添加 then 方法
Promise.prototype.then = function(onResolved, onRejected){

}
复制代码
2.resolve与reject函数实现
//Promise.js
//声明构造函数
function Promise(executor){
//添加属性
this.PromiseState = ‘pending’;
this.PromiseResult = null;
//保存实例对象的 this 的值
const self = this;// self _this that
//resolve 函数
function resolve(data){
//1. 修改对象的状态 (promiseState)
self.PromiseState = ‘fulfilled’;// resolved
//2. 设置对象结果值 (promiseResult)
self.PromiseResult = data;
}
//reject 函数
function reject(data){
//1. 修改对象的状态 (promiseState)
self.PromiseState = ‘rejected’;//
//2. 设置对象结果值 (promiseResult)
self.PromiseResult = data;
}

//同步调用『执行器函数』
executor(resolve, reject);

}

//添加 then 方法
Promise.prototype.then = function(onResolved, onRejected){

}
复制代码
3.状态只能修改一次
使用我们写的Promise输出状态不对，状态只能修改一次
let p = new Promise((resolve, reject) => {
reject(“error”);
resolve(‘OK’);
});

console.log§;
//输出的状态是 PromiseState: “fulfilled” PromiseResult: “OK”
复制代码
这时候需要将resolve和reject函数，当状态不等于pending直接return
//Promis.js
//resolve 函数
function resolve(data){
//判断状态
if(self.PromiseState !== ‘pending’) return;
//1. 修改对象的状态 (promiseState)
self.PromiseState = ‘fulfilled’;// resolved
//2. 设置对象结果值 (promiseResult)
self.PromiseResult = data;
}
//reject 函数
function reject(data){
//判断状态
if(self.PromiseState !== ‘pending’) return;
//1. 修改对象的状态 (promiseState)
self.PromiseState = ‘rejected’;//
//2. 设置对象结果值 (promiseResult)
self.PromiseResult = data;
}
复制代码
4.简单then方法执行回调
//Promis.js
//添加 then 方法
Promise.prototype.then = function(onResolved, onRejected){
//调用回调函数 PromiseState
if(this.PromiseState