Promise 是 JavaScript 中处理异步操作的一种方式，它可以避免回调地狱，并且更容易组合异步操作。Promise 有构造函数和原型对象，它们分别定义了 Promise 实例的属性和方法。在使用 Promise 时，如何正确使用构造函数和原型对象是我们需要掌握的知识。
构造函数
Promise 的构造函数接收一个函数参数，这个函数有两个参数，分别是 resolve 和 reject。resolve 函数用于将 Promise 状态设为成功（fulfilled），其参数是 Promise 成功后的值；reject 函数用于将 Promise 状态设为失败（rejected），其参数是 Promise 失败的原因。
const promise = new Promise((resolve, reject) => { if (/* some condition */) { resolve(/* some value */); } else { reject(/* some error */); } });
在构造函数中，我们可以进行一些异步操作，并且在操作完成后调用 resolve 或 reject 函数，将 Promise 的状态设为成功或失败。如果操作成功，resolve 函数将被调用并传递成功的值；如果操作失败，reject 函数将被调用并传递失败的原因。
原型对象
Promise 的原型对象上有 then、catch、finally 等方法，它们是 Promise 实例最常用的方法。
then 方法
then 方法接收两个参数，分别是处理成功状态的回调函数和处理失败状态的回调函数。当 Promise 状态变为成功时，第一个回调函数将被调用并传递 Promise 的值；当 Promise 状态变为失败时，第二个回调函数将被调用并传递 Promise 的错误信息。then 方法返回一个新的 Promise，它的状态和值根据回调函数的执行结果而定。
promise.then( (value) => { // handle success }, (error) => { // handle error } );
catch 方法
catch 方法只接收一个错误处理函数，它用于处理 Promise 状态变为失败时的情况。catch 方法返回一个新的 Promise，它的状态和值根据错误处理函数的执行结果而定。catch 方法等效于 then 方法的第二个参数为错误处理函数的情况。
promise.catch((error) => { // handle error });
finally 方法
finally 方法接收一个回调函数，它用于在 Promise 执行结束后无论成功与否都要执行。finally 方法返回一个新的 Promise，它的状态和值根据回调函数的执行结果而定。finally 方法可以在 Promise 完成后执行一些清理操作，例如关闭文件或数据库连接。
promise.finally(() => { // do some cleanup });
最佳实践
在使用 Promise 时，我们应该遵循一些最佳实践。
1. 尽可能使用箭头函数
在 Promise 的回调函数中，我们建议尽可能使用箭头函数。这样可以确保 this 指向正确，避免出现 this 非预期的情况。
-- -------------------- ---- ------- ----- ------- - --- ----------------- ------- -- - -- ---- ----- --------- --- -------------------- -- - -- ------ ------- ---------------- -- - -- ------ ----- ------------- -- - -- -- ---- ------- ---展开代码
2. 拆分 Promise 链
当 Promise 链变得很长时，我们可以考虑拆分它，将每个异步操作拆成一个函数，这样代码更易于维护和测试。
-- -------------------- ---- ------- -------- --------------- - ------ -------------------------------------------- -- - ------ ---------------- --- - -------- ---------------- - ------ -------------------------------------------------- -- - ------ ---------------- --- - -------- ------------------- - ------ ----------------------------------------------------- -- - ------ ---------------- --- - ---------------------- -- - ------ ------------------ --------------- -- - ------ ------------------------- ------------------ -- - -- ------ -------- ---------------- -- - -- ------ ----- ---展开代码
3. 错误处理
在使用 Promise 时，我们要注意错误处理。如果没有正确处理错误，Promise 可能会一直处于 pending 状态，造成浏览器卡死。因此，我们要确保在最后使用 catch 方法捕获错误，并在 catch 方法中处理错误。
-- -------------------- ---- ------- ----- ------- - --- ----------------- ------- -- - -- ---- ----- --------- --- -------------------- -- - -- ------ ------- ---------------- -- - -- ------ ----- ------------- -- - -- -- ---- ------- ---展开代码
示例代码
下面是一个使用 Promise 实现异步加载图片的示例代码。
-- -------------------- ---- ------- -- ------ -------- ------------------- - ------ --- ----------------- ------- -- - ----- ----- - --- -------- ------------ - -- -- - --------------- -- ------------- - -- -- - ---------- ------------ --- ---- ----- -- ---------- -- --------- - ---- --- - -------------------------------------------------------- -- - --------------------------------- ---------------- -- - --------------------- ---展开代码
在这个例子中，我们使用 Promise 的构造函数和原型对象，实现了异步加载图片并添加到页面的功能。在构造函数中，我们创建一个 Image 对象，并注册了图片加载完成和加载失败的事件监听器。在原型对象中，我们使用 then 方法处理成功状态和 catch 方法处理失败状态，并将加载完成的图片添加到页面中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bada87306f20b3a69f4ff3
