手写 Promise 不废话上代码
// 基础框架
function myPromise(promiseCallback) {
let self = this;
self.status = "pending"; // 状态
self.value = null; // 成功结果
self.error = null; // 失败原因
self.onResolvedCallbacks = [];
self.onRejectedCallbacks = [];
// 成功的回调
function resolve(value) {
if (self.status === 'pending') { // 状态处理
self.status = 'fulfilled'; // 保存成功的状态
self.value = value; // 保存成功的结果
self.onResolvedCallbacks.forEach(item => item(value)); // 方法依次取出
}
}
// 失败的回调
function reject(error) {
if (self.status === 'pending') {
self.status = 'rejected'; // 保存错误的状态
self.error = error; // 保存错误的结果
self.onRejectedCallbacks.forEach(item => item(error));
}
}
// 立即执行promise参数的回调
try {
promiseCallback(resolve, reject);
} catch (e) {
reject(e);
}
}
// 原型上注入then方法
myPromise.prototype.then = function(onFulfilled, onRejected) {
onFulfilled = typeof onFulfilled === "function" ? onFulfilled : (value) => value;
onRejected = typeof onRejected === "function" ? onRejected : (reason) => { throw reason };
/*** 发布订阅模式 ***/
if (this.status === "pending") {
return new myPromise((resolve, reject) => {
this.onResolvedCallbacks.push(() => {
const fn = onFulfilled(this.value);
fn instanceof myPromise ? fn.then(resolve, reject) : resolve(fn);
});
this.onRejectedCallbacks.push(() => {
const fn = onRejected(this.error);
fn instanceof myPromise ? fn.then(resolve, reject) : resolve(fn);
});
});
}
if (this.status === "fulfilled") {
return new myPromise((resolve, reject) => {
try {
const fn = onFulfilled(this.value);
fn instanceof myPromise ? fn.then(resolve, reject) : resolve(fn);
} catch (err) { reject(err); }
});
}
if (this.status === "rejected") {
return new myPromise((resolve, reject) => {
try {
const fn = onRejected(this.error);
fn instanceof myPromise ? fn.then(resolve, reject) : resolve(fn);
} catch (error) { reject(error); }
});
}
}
// 原型上注入catch方法
myPromise.prototype.catch = function(onRejected) {
return this.then(null, onRejected);
}
// 创建myPromise实例化对象
let promiseTest = new myPromise((resolve, reject) => {
console.log("myPromise1");
setTimeout(e => resolve("myPromise1"), 300);
});
// 链式调用示例
promiseTest
.then(data => {
console.log("then1:",data);
return new myPromise((resolve, reject) => {
console.log("myPromise2");
setTimeout(e => resolve("promise2"), 300);
});
})
.then(data => {
console.log("then2:",data);
return new myPromise((resolve, reject) => {
console.log("myPromise3");
setTimeout(e => resolve("promise3"), 300);
});
})
.then(data => {
console.log("then3:",data);
})
.catch(e => console.log(e))
手写 Promise 简要思路:
- 建立基本框架,即构建myPromise的构造函数,内部定义基本的属性,如状态、成功结果、失败原因,成功毁掉、失败回调等
- myPromise构造函数原型上增加then、catch等方法
- myPromise构造函数内执行其参数回调函数
- 进入成功或失败的回调函数中,修改状态
- then中执行发布订阅模式,then参数的回调方法进行存储
附:Promise 运行机制简述
在 JavaScript 中,Promise 是一种用于处理异步操作的对象。Promise 有三种状态:待定(pending)、已完成(fulfilled)和已拒绝(rejected)。一个 Promise 对象在创建后会一直处于待定状态,直到它被解决为止。
Promise 对象的运行机制如下:
- 创建 Promise 对象:通过调用 Promise 构造函数创建一个 Promise 对象,这个构造函数需要传入一个回调函数作为参数。这个回调函数包含两个参数:resolve 和 reject。
- 处理异步操作:在 Promise 对象中,异步操作是通过回调函数来实现的。当异步操作完成后,调用 resolve 方法将 Promise 对象的状态设置为已完成,或者调用 reject 方法将 Promise 对象的状态设置为已拒绝。
- 处理 Promise 对象的状态:当 Promise 对象的状态改变时,会触发 Promise 对象的 then 或 catch 方法。如果 Promise 对象的状态是已完成,then 方法会接收一个回调函数作为参数,这个回调函数会被调用,并且传入异步操作的结果作为参数。如果 Promise 对象的状态是已拒绝,catch 方法会接收一个回调函数作为参数,这个回调函数会被调用,并且传入错误信息作为参数。
- 链式调用:由于 Promise 对象的 then 和 catch 方法都会返回一个新的 Promise 对象,因此可以链式调用这些方法,处理异步操作的结果。
总的来说,Promise 对象的运行机制是通过创建 Promise 对象,处理异步操作,处理 Promise 对象的状态,以及链式调用 Promise 对象的 then 和 catch 方法来实现的。