什么是回调地狱
在 JavaScript 中，如果需要进行一系列的异步操作，原来的做法是通过回调函数来实现。
然而，随着代码逻辑复杂度的增加，这种方式会产生“回调地狱”的问题：每次回调嵌套层数增加，导致可读性差，难以维护。
以下是一个典型的回调地狱代码示例：
getData(function(data) { getMoreData(data, function(moreData) { getMoreMoreData(moreData, function(finalData) { console.log(finalData); }); }); });
如果需要进行多次异步操作，就需要回调函数的嵌套。这会导致代码可读性差，难以维护。
Promise 的介绍
Promise 是 ES6 中新增的一个对象，可以用来管理异步操作的状态。
Promise 有 3 种状态：
- 等待（pending）：Promise 实例被创建后，但是还没有完成异步操作。
- 已完成（fulfilled）：异步操作成功完成。
- 已拒绝（rejected）：异步操作失败。
以下是 Promise 的基本用法：
-- -------------------- ---- ------- --- ------- - --- ------------------------- ------- - -- ------------------- --------------------- - --- ---- - --------- -- ------ - -------------- -- ---- - ---- - ---------- ------------------ -- ---- - -- ------ --- ------- -------------------- - ------------------ -- ---- -- ---------------------- - --------------------- -- ---- ---展开代码
resolve和reject都是函数，分别用来处理 Promise 的状态变更。then和catch方法返回的也是 Promise 对象，可以继续链式调用。
Promise 辅助函数
在 ES6 中，Promise 已经成为了核心语言特性，并已经被广泛应用。同时也有许多 Promise 辅助函数可以帮助我们更好地处理异步操作。以下是一些常用的 Promise 辅助函数：
Promise.all(iterable)
Promise.all 接受一个可迭代对象（如数组），将所有 Promise 实例作为参数传入，并返回一个新的 Promise 实例。
只有当所有 Promise 都被 resolved 时，新的 Promise 的状态才是 resolved，返回值是所有 Promise 的返回值组成的数组。
let promise1 = Promise.resolve(1); let promise2 = Promise.resolve(2); let promise3 = Promise.resolve(3); Promise.all([promise1, promise2, promise3]).then(function(data) { console.log(data); // [1, 2, 3] });
Promise.race(iterable)
Promise.race 也接受一个可迭代对象，返回一个新的 Promise 实例。
只有当某个 Promise 被 resolved 或 rejected 时，新的 Promise 才会被 resolved 或 rejected，并返回该 Promise 的返回值。
-- -------------------- ---- ------- --- -------- - --- ------------------------- ------- - ------------------- ----- ------- --- --- -------- - --- ------------------------- ------- - ------------------- ----- ------- --- ----------------------- ------------------------------ - ------------------ -- ----- ---展开代码
Promise.resolve(value) 和 Promise.reject(error)
Promise.resolve 方法返回一个状态为 resolved 的 Promise 对象。可以通过传入任何对象来返回该对象的 Promise 包装。如果传入的是一个 Promise 对象，则原封不动地返回该对象。
let result = Promise.resolve('foo'); console.log(result); // 'Promise { <resolved>: "foo" }'
Promise.reject 方法返回一个状态为 rejected 的 Promise 对象，参数通常是一个错误对象。
let result = Promise.reject(new Error('something went wrong')); console.log(result); // 'Promise { <rejected>: Error: something went wrong }'
Promise 实例代码示例
有了 Promise 的基本概念和方法介绍，我们就可以尝试在实际开发中利用 Promise 解决回调地狱问题。以下是一个使用 Promise 实现异步操作的示例代码：
-- -------------------- ---- ------- -------- -------------- - ------ --- ------------------------- ------- - --------------------- - ----------------- ---------- -- ------ --- - -------- -------------- - ------ --- ------------------------- ------- - --------------------- - ----------------- ---------- -- ------ --- - -------- -------------- - ------ --- ------------------------- ------- - --------------------- - ----------------- ---------- -- ------ --- - ----------------- ----------------------- - --------------------- ------ ------------------ -- ----------------------- - --------------------- ------ ------------------ -- ----------------------- - --------------------- -- --------------------- ------------------- ---展开代码
其中的 asyncFn1、asyncFn2、asyncFn3 是三个异步操作，每次返回 Promise 实例。
通过 Promise 的 then 方法实现异步操作之间的顺序执行，同时也可以在 catch 中统一处理错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b9b7de306f20b3a682b2b5
