前言
Promise 在我们的前端开发中扮演着非常重要的角色，但是学习和使用 Promise 时，我们也经常会遇到各种问题和错误。本篇文章将深入剖析 ECMAScript 2020 中 Promise 的最佳实践以及常见错误，并给出详细的指导意义和示例代码。
Promise 的基本知识
Promise 是 JavaScript 中的一个对象，它代表异步操作的最终完成或失败，并返回相应的结果对象。在创建 Promise 实例时，我们需要传入一个函数（通常称为 executor），该函数接收两个函数作为参数，分别是 resolve 和 reject，表示异步操作成功和失败时的回调。
const promise = new Promise((resolve, reject) => {
// 异步操作
if (/* 异步操作成功 */ ) {
resolve('success');
} else {
reject('failure');
}
});Promise 实例可以通过 then 方法注册成功回调和失败回调：
promise.then((value) => {
// 成功回调
}).catch((reason) => {
// 失败回调
});通常情况下，我们通过 Promise 实现异步操作时需要返回一个 Promise 对象。比如：
// javascriptcn.com 代码示例
function loadImage(url) {
return new Promise((resolve, reject) => {
const image = new Image();
image.onload = () => {
// 异步操作成功
resolve(image);
};
image.onerror = () => {
// 异步操作失败
reject(new Error('load image failure'));
};
image.src = url;
});
}
// 使用 Promise 实现异步操作
loadImage('http://example.com/images/1.jpg')
.then((image) => {
console.log('图片加载成功：', image);
})
.catch((err) => {
console.log('图片加载失败：', err.message);
});Promise 的最佳实践
1. Promise 的链式调用
Promise 的 then 方法可以返回一个新的 Promise 实例，从而实现链式调用。比如：
// javascriptcn.com 代码示例
promise
.then((value) => {
// 第一个 then 回调
return value + 1;
})
.then((value) => {
// 第二个 then 回调
return value + 2;
})
.then((value) => {
// 第三个 then 回调
console.log(value);
});这种方式可以避免回调地狱，让代码更加清晰易懂。但是需要注意的是，如果在链式调用中出现了异常或者返回了一个 rejected 的 Promise 实例，整个链式调用都会被中止。因此，我们需要在链式调用的最后添加 catch 方法来捕获异常和处理错误，以确保代码的正确执行。
2. Promise 的 all 和 race 方法
Promise 提供了 all 和 race 两个静态方法，分别用于处理多个 Promise 实例的并行执行和竞争执行，这些方法可以大大简化异步编程的逻辑。比如：
// javascriptcn.com 代码示例
// all 方法
Promise.all([promise1, promise2, promise3])
.then((results) => {
console.log(results);
})
.catch((err) => {
console.log(err);
});
// race 方法
Promise.race([promise1, promise2, promise3])
.then((result) => {
console.log(result);
})
.catch((err) => {
console.log(err);
});all 方法接收一个 Promise 实例数组作为参数，当数组中所有的 Promise 实例都成功后，才会返回一个成功的 Promise 实例，如果其中任何一个 Promise 实例失败，则整个 all 方法的返回值也会是一个失败的 Promise 实例。race 方法也接收一个 Promise 实例数组作为参数，不同的是，它只要求其中的任何一个 Promise 实例完成后立即返回它的结果，不会等待其他的 Promise 实例。
3. Promise 的清理功能
当我们通过 Promise 实现异步操作时，有可能会发生内存泄漏的问题，即我们在注册回调后忘记了取消订阅，导致回调函数不能及时释放。针对这个问题，ECMAScript 2020 引入了新的 API：finally。
// javascriptcn.com 代码示例
promise
.then((value) => {
// 成功回调
})
.catch((reason) => {
// 失败回调
})
.finally(() => {
// 清理函数
});finally 方法接收一个清理函数作为参数，在 finally 方法被调用时，不论 Promise 是成功还是失败，都会执行该清理函数。清理函数通常用于释放一些资源或者进行一些清理操作，比如取消订阅或者中止异步操作。
Promise 的常见错误
1. 没有返回 Promise 实例
在 executor 函数中，如果没有返回一个 Promise 实例，则会抛出一个异常，导致 Promise 的状态无法被扭转。比如：
// javascriptcn.com 代码示例
const promise = new Promise((resolve, reject) => {
// 异步操作
setTimeout(() => {
resolve('success');
}, 1000);
});
// 报错：未返回 Promise 实例
const promise = new Promise((resolve, reject) => {
// 异步操作
setTimeout(() => {
resolve('success');
}, 1000);
return 'failure';
});2. 忘记传入 catch 方法
Promise 实例在注册完成功回调和错误回调之后，还需要注册 catch 方法来捕获异常和处理错误。如果我们忘记了传入 catch 方法，则任何一个 Promise 实例的错误都会被忽略，导致代码无法正确执行。比如：
// javascriptcn.com 代码示例
promise.then((value) => {
// 成功回调
});
// 报错：未注册 catch 方法
promise.then((value) => {
// 成功回调
}).catch((reason) => {
// 错误回调
});3. then 方法的返回值判断
Promise 的 then 方法可以返回一个新的 Promise 实例，但是需要注意的是，then 方法的返回值如果是一个 Promise 实例，则后面的 then 方法会直接使用该 Promise 实例的结果，而不是等到异步操作完成之后再执行。比如：
// javascriptcn.com 代码示例
promise
.then((value) => {
// 第一个 then 回调
return new Promise((resolve, reject) => {
// 异步操作
setTimeout(() => {
resolve(value + 1);
}, 1000);
});
})
.then((value) => {
// 第二个 then 回调
console.log(value);
});第一个 then 回调返回了一个新的 Promise 实例，如果我们没有注意到这一点，很可能会导致错误的计算结果。
总结
Promise 是 JavaScript 中非常重要的异步编程工具，但是在使用 Promise 时会经常遇到各种问题和错误。本文深入剖析了 ECMAScript 2020 中 Promise 的最佳实践和常见错误，对于前端开发人员来说非常有指导意义。在使用 Promise 时，我们需要注意返回值判断、合理使用链式调用、合理使用 all 和 race 方法、以及清理操作等方面，从而为我们的前端开发工作带来更高的效率和更好的质量。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652a27ad7d4982a6ebc82730