在前端面试和日常开发中,经常会接触到Promise。并且在现如今的很多面试中,也会经常被要求手写Promise。
接下来,将使用JavaScript循序渐进实现一个简单的Promise,支持异步和then链式调用。
Promise对象用于表示一个异步操作的最终完成 (或失败)及其结果值,常用来实现异步操作。
Promise有三种状态:
pending 初始状态
fulfilled 执行成功后的状态
rejected 执行失败后的状态
Promise状态只能由pending改变为fulfilled或者由pending改变为rejected,Promise状态改变的这一过程被称为settled,并且,状态一旦改变,后续就不会再次被改变。
Promise构造函数接收一个函数参数executor,该函数接收两个参数:
resolve
reject
执行resolve会将Promise状态由pending改变为fulfilled,并触发then方法中的成功回调函数onFulfilled,
执行reject会将Promise状态由pending改变为rejected,并触发then方法中的失败回调函数onRejected。
then方法接收两个参数:
onFulfilled:成功回调函数,接收一个参数,即resolve函数中传入的值
onRejected:失败回调函数,接收一个参数,即reject函数中传入的值
如果Promise状态变为fulfilled,就会执行成功回调函数onFulfilled;如果Promise状态变为rejected,就会执行失败回调函数onRejected。
首先,constructor接收一个函数executor,该函数又接收两个参数,分别是resolve和reject函数。
因此,需要在constructor中创建resolve和reject函数,并传入executor函数中。
class MyPromise {
constructor(executor) {
const resolve = (value) => {};
const reject = (value) => {};
try {
executor(resolve, reject);
} catch (err) {
reject(err);
}
}
}
其次,Promise会根据状态,执行对应的回调函数。最开始的状态为pending,当resolve时,状态由pending变为fulfilled;当reject时,状态由pending变为rejected。
class MyPromise {
constructor(executor) {
this.state = 'pending';
const resolve = (value) => {
if (this.state === 'pending') {
this.state = 'fulfilled';
}
};
const reject = (value) => {
if (this.state === 'pending') {
this.state = 'rejected';
}
};
try {
executor(resolve, reject);
} catch (err) {
reject(err);
}
}
}
Promise状态变更后,会触发then方法中对应的回调函数。如果状态由pending变为fulfilled,则会触发成功回调函数,如果状态由pending变为rejected,则会触发失败回调函数。
class MyPromise {
constructor(executor) {
this.state = 'pending';
this.value = null;
const resolve = (value) => {
if (this.state === 'pending') {
this.state = 'fulfilled';
this.value = value;
}
};
const reject = (value) => {
if (this.state === 'pending') {
this.state = 'rejected';
this.value = value;
}
};
try {
executor(resolve, reject);
} catch (err) {
reject(err);
}
}
then(onFulfilled, onRejected) {
if (this.state === 'fulfilled') {
onFulfilled(this.value);
}
if (this.state === 'rejected') {
onRejected(this.value);
}
}
}
接下来可以写点测试代码测试一下功能
const p1 = new MyPromise((resolve, reject) => resolve('resolved'));
p1.then(
(res) => console.log(res), // resolved
(err) => console.log(err)
);
const p2 = new MyPromise((resolve, reject) => reject('rejected'));
p2.then(
(res) => console.log(res),
(err) => console.log(err) // rejected
);
但是,如果用以下代码测试,会发现什么也没有输出。
const p1 = new MyPromise((resolve, reject) => {
setTimeout(() => resolve('resolved'), 1000);
});
p1.then(
(res) => console.log(res),
(err) => console.log(err)
);
const p2 = new MyPromise((resolve, reject) => {
setTimeout(() => reject('rejected'), 1000);
});
p2.then(
(res) => console.log(res),
(err) => console.log(err)
);
这是因为在调用then方法时,Promise仍处于pending状态。onFulfilled和onRejected回调函数都没有被执行。
因此,接下来需要支持异步。
为了支持异步,需要先保存onFulfilled和onRejected回调函数,一旦Promise状态变化,立刻执行对应的回调函数。
注意:这里有个细节需要注意,即onFulfilledCallbacks和onRejectedCallbacks是数组,因为Promise可能会被调用多次,因此会存在多个回调函数。
class MyPromise {
constructor(executor) {
this.state = 'pending';
this.value = null;
this.onFulfilledCallbacks = [];
this.onRejectedCallbacks = [];
const resolve = (value) => {
if (this.state === 'pending') {
this.state = 'fulfilled';
this.value = value;
this.onFulfilledCallbacks.forEach((fn) => fn(value));
}
};
const reject = (value) => {
if (this.state === 'pending') {
this.state = 'rejected';
this.value = value;
this.onRejectedCallbacks.forEach((fn) => fn(value));
}
};
try {
executor(resolve, reject);
} catch (err) {
reject(err);
}
}
then(onFulfilled, onRejected) {
if (this.state === 'pending') {
this.onFulfilledCallbacks.push(onFulfilled);
this.onRejectedCallbacks.push(onRejected);
}
if (this.state === 'fulfilled') {
onFulfilled(this.value);
}
if (this.state === 'rejected') {
onRejected(this.value);
}
}
}
接下来可以用之前的测试代码测试一下功能
const p1 = new MyPromise((resolve, reject) => {
setTimeout(() => resolve('resolved'), 1000);
});
p1.then(
(res) => console.log(res), // resolved
(err) => console.log(err)
);
const p2 = new MyPromise((resolve, reject) => {
setTimeout(() => reject('rejected'), 1000);
});
p2.then(
(res) => console.log(res),
(err) => console.log(err) // rejected
);
但是如果用以下代码测试,会发现报错了。
const p1 = new MyPromise((resolve, reject) => {
setTimeout(() => resolve('resolved'), 1000);
});
p1.then(
(res) => console.log(res),
(err) => console.log(err)
).then(
(res) => console.log(res),
(err) => console.log(err)
); // Uncaught TypeError: Cannot read property 'then' of undefined
这是因为第一个then方法并没有返回任何值,然而却又连续调用了then方法。
因此,接下来需要实现then链式调用。
要想支持then链式调用,then方法需要返回一个新的Promise。
因此,需要改造一下then方法,返回一个新的Promise,等上一个Promise的onFulfilled或onRejected回调函数执行完成后,再执行新的Promise的resolve或reject函数。
class MyPromise {
then(onFulfilled, onRejected) {
return new MyPromise((resolve, reject) => {
if (this.state === 'pending') {
this.onFulfilledCallbacks.push(() => {
try {
const fulfilledFromLastPromise = onFulfilled(this.value);
resolve(fulfilledFromLastPromise);
} catch (err) {
reject(err);
}
});
this.onRejectedCallbacks.push(() => {
try {
const rejectedFromLastPromise = onRejected(this.value);
reject(rejectedFromLastPromise);
} catch (err) {
reject(err);
}
});
}
if (this.state === 'fulfilled') {
try {
const fulfilledFromLastPromise = onFulfilled(this.value);
resolve(fulfilledFromLastPromise);
} catch (err) {
reject(err);
}
}
if (this.state === 'rejected') {
try {
const rejectedFromLastPromise = onRejected(this.value);
reject(rejectedFromLastPromise);
} catch (err) {
reject(err);
}
}
});
}
}
接下来可以用以下代码测试一下功能
const p1 = new MyPromise((resolve, reject) => {
setTimeout(() => resolve('resolved'), 1000);
});
p1.then(
(res) => {
console.log(res); // resolved
return res;
},
(err) => console.log(err)
).then(
(res) => console.log(res), // resolved
(err) => console.log(err)
);
const p2 = new MyPromise((resolve, reject) => {
setTimeout(() => reject('rejected'), 1000);
});
p2.then(
(res) => console.log(res),
(err) => {
console.log(err); // rejected
throw new Error('rejected');
}
).then(
(res) => console.log(res),
(err) => console.log(err) // Error: rejected
);
但是,如果改用以下代码测试,会发现第二个then方法中的成功回调函数并没有按预期输出(‘resolved’),而是输出了上一个then方法的onFulfilled回调函数中返回的Promise。
const p1 = new MyPromise((resolve, reject) => {
setTimeout(() => resolve('resolved'), 1000);
});
p1.then(
(res) => {
console.log(res); // resolved
return new MyPromise((resolve, reject) => {
setTimeout(() => resolve('resolved'), 1000);
})
},
(err) => console.log(err)
).then(
(res) => console.log(res), // MyPromise {state: "pending"}
(err) => console.log(err)
);
这是因为onFulfilled/onRejected回调函数执行完之后,只是简单的将onFulfilled/onRejected执行完返回的值传入resolve/reject函数中执行,并没有考虑onFulfilled/onRejected执行完会返回一个新的Promise这种情况,所以第二次then方法的成功回调函数中直接输出了上一次then方法的成功回调函数中返回的Promise。因此,接下来需要解决这个问题。
首先,可以将以上测试代码改成另一种写法,方便梳理思路。
const p1 = new MyPromise((resolve, reject) => {
setTimeout(() => resolve('resolved'), 1000);
});
const p2 = p1.then(
(res) => {
console.log(res);
const p3 = new MyPromise((resolve, reject) => {
setTimeout(() => resolve('resolved'), 1000);
});
return p3;
},
(err) => console.log(err)
);
p2.then(
(res) => console.log(res),
(err) => console.log(err)
);
可以看到,一共有三个Promise:
第一个Promise:即通过new构造出来的p1
第二个Promise:即通过调用then方法返回的p2
第三个Promise:即在p1.then方法的成功回调函数参数中返回的p3
现在的问题是,调用p2的then方法时,p3还处于pending状态。
要想实现p2.then方法中的回调函数能正确输出p3中resolve/reject之后的值,需要先等p3状态变化后再将变化后的值传入p2中的resolve/reject中即可。换句话说,三个Promise状态变化的先后顺序应该是p1 --> p3 --> p2。
class MyPromise {
then(onFulfilled, onRejected) {
return new MyPromise((resolve, reject) => {
if (this.state === 'pending') {
this.onFulfilledCallbacks.push(() => {
try {
const fulfilledFromLastPromise = onFulfilled(this.value);
if (fulfilledFromLastPromise instanceof MyPromise) {
fulfilledFromLastPromise.then(resolve, reject);
} else {
resolve(fulfilledFromLastPromise);
}
} catch (err) {
reject(err);
}
});
this.onRejectedCallbacks.push(() => {
try {
const rejectedFromLastPromise = onRejected(this.value);
if (rejectedFromLastPromise instanceof MyPromise) {
rejectedFromLastPromise.then(resolve, reject);
} else {
reject(rejectedFromLastPromise);
}
} catch (err) {
reject(err);
}
});
}
if (this.state === 'fulfilled') {
try {
const fulfilledFromLastPromise = onFulfilled(this.value);
if (fulfilledFromLastPromise instanceof MyPromise) {
fulfilledFromLastPromise.then(resolve, reject);
} else {
resolve(fulfilledFromLastPromise);
}
} catch (err) {
reject(err);
}
}
if (this.state === 'rejected') {
try {
const rejectedFromLastPromise = onRejected(this.value);
if (rejectedFromLastPromise instanceof MyPromise) {
rejectedFromLastPromise.then(resolve, reject);
} else {
reject(rejectedFromLastPromise);
}
} catch (err) {
reject(err);
}
}
});
}
}
最后,一个简单的Promise就完成了,支持异步和then链式调用。完整代码如下:
class MyPromise {
constructor(executor) {
this.state = 'pending';
this.value = null;
this.onFulfilledCallbacks = [];
this.onRejectedCallbacks = [];
const resolve = (value) => {
if (this.state === 'pending') {
this.state = 'fulfilled';
this.value = value;
this.onFulfilledCallbacks.forEach((fn) => fn(value));
}
};
const reject = (value) => {
if (this.state === 'pending') {
this.state = 'rejected';
this.value = value;
this.onRejectedCallbacks.forEach((fn) => fn(value));
}
};
try {
executor(resolve, reject);
} catch (err) {
reject(err);
}
}
then(onFulfilled, onRejected) {
return new Promise((resolve, reject) => {
if (this.state === 'pending') {
this.onFulfilledCallbacks.push(() => {
try {
const fulfilledFromLastPromise = onFulfilled(this.value);
if (fulfilledFromLastPromise instanceof Promise) {
fulfilledFromLastPromise.then(resolve, reject);
} else {
resolve(fulfilledFromLastPromise);
}
} catch (err) {
reject(err);
}
});
this.onRejectedCallbacks.push(() => {
try {
const rejectedFromLastPromise = onRejected(this.value);
if (rejectedFromLastPromise instanceof Promise) {
rejectedFromLastPromise.then(resolve, reject);
} else {
reject(rejectedFromLastPromise);
}
} catch (err) {
reject(err);
}
});
}
if (this.state === 'fulfilled') {
try {
const fulfilledFromLastPromise = onFulfilled(this.value);
if (fulfilledFromLastPromise instanceof Promise) {
fulfilledFromLastPromise.then(resolve, reject);
} else {
resolve(fulfilledFromLastPromise);
}
} catch (err) {
reject(err);
}
}
if (this.state === 'rejected') {
try {
const rejectedFromLastPromise = onRejected(this.value);
if (rejectedFromLastPromise instanceof Promise) {
rejectedFromLastPromise.then(resolve, reject);
} else {
reject(rejectedFromLastPromise);
}
} catch (err) {
reject(err);
}
}
});
}
}
使用JavaScript循序渐进实现一个简单的Promise,支持异步和then链式调用。
翻译并整理自Medium: Implementing a simple Promise in Javascript - by Zhi Sun
Promise 想必大家十分熟悉,想想就那么几个 api,可是你真的了解 Promise 吗?本文根据 Promise 的一些知识点总结了十道题,看看你能做对几道。
本文写给有一定Promise使用经验的人,如果你还没有使用过Promise,这篇文章可能不适合你,Promise标准中仅指定了Promise对象的then方法的行为,其它一切我们常见的方法/函数都并没有指定.
Async/Await替代Promise的6个理由:Async/Await是近年来JavaScript添加的最革命性的的特性之一。它会让你发现Promise的语法有多糟糕,而且提供了一个直观的替代方法。
Promise是JS异步编程中的重要概念,异步抽象处理对象,是目前比较流行Javascript异步编程解决方案之一,Promise 是一个构造函数, new Promise 返回一个 promise对象 接收一个excutor执行函数作为参数
这篇文章是考虑如何自己实现一个简单 Promise,用以理解 Promise。和原生 Promise的调用方法一样,支持链式调用,本文实现的方法只能用于参考Promise的原理,还有很多特性没有实现,比如 race,all 方法的实现。
在对数组进行一些遍历操作时,发现有些遍历方法对Promise的反馈并不是我们想要的结果。async/await为Promise的语法糖,文中会直接使用async/await替换Promise;map可以说是对Promise最友好的一个函数了,
最近在使用axios库时遇到了个问题,后端接口报了500错误,但前端并未捕获到。在axios整体配置的代码中,过滤http code时,调用了filter401()、filter500(),但是这里注意并未将两个filter函数的结果返回,也就是并未返回promise,这就是导致问题出现的原因
想必接触过Node的人都知道,Node是以异步(Async)回调著称的,其异步性提高了程序的执行效率,但同时也减少了程序的可读性。如果我们有几个异步操作,并且后一个操作需要前一个操作返回的数据才能执行
你可以在 .then 里面 return 一个 Promise,每次执行 .then 的时候都会自动创建一个新的 Promise,对调用者来说,Promise 的 resolved/rejected 状态是唯一的,Promise 构造函数不是解决方案,使用 Promise.resolve
Promise的一些用法在此不多赘述,本篇主要带领你手写一个Promise源码,学完你就会发现:Promise没有你想象中的那么难.本篇大概分为以下步骤:实现简单的同步Promise、增加异步功能、增加链式调用then、增加catch finally方法、增加all race 等方法、实现一个promise的延迟对象defer、最终测试
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!