前言
在编写前端代码过程中，异步操作是非常常见的一种情况。ES6 中的 Promise 对象底层采用事件和回调函数来实现异步操作，利用 Promise 的链式调用可以使异步操作代码更加简洁易读。本文将介绍 Promise 的 Chaining 使用技巧，帮助读者更好地应用 Promise。
Promise 简介
Promise 是一种异步编程的解决方案，ES6 将其写进了语言标准，统一了异步编程的风格。Promise 有以下三种状态：
- pending（进行中）
- fulfilled（已成功）
- rejected（已失败）
Promise 的then方法返回一个新的 Promise 对象，所以可以进行链式调用，这也是 Promise 独有的特性。
Promise 的 Chaining
Promise 的 Chaining 其实就是将多个 Promise 对象进行链式调用，让代码看起来更加直观清晰。下面是一个简单的 Promise 的链式调用例子：
Promise.resolve(1) .then((result1) => result1 + 1) .then((result2) => console.log(result2));
这段代码的执行结果为 2。此时 Promise.resolve(1) 返回的是一个 Promise 对象，在第一个 then 方法中，对返回的值加 1 并返回一个新的 Promise 对象，接着第二个 then 方法对这个新的 Promise 对象进行操作，最终输出结果 2。
上面这个例子中，then 方法内部的回调函数会将返回的结果传递给下一个 then 方法的回调函数。如果回调函数返回的是一个新的 Promise 对象，当前 then 方法返回的就是这个新的 Promise 对象。如果回调函数返回的是一个普通的值或者 undefined，当前 then 方法返回的是一个以返回值为成功状态的 Promise 对象。
Promise Chaining 的技巧
抛出错误
在 Promise 中抛出错误，一般使用 reject 方法。但是如果在 catch 方法中处理错误会让代码显得不太优雅。此时可以利用 Promise 的 Chaining，在 then 方法中抛出错误，这样就可以使用 catch 方法处理错误，使代码看起来更加清晰。
Promise.reject(new Error('出错了')) .catch((error) => console.error(error))
上面这段代码中，Promise.reject 方法返回的是一个失败状态的 Promise 对象，进入 catch 方法处理错误。
建立多个 Promise 链
Promise 的 Chaining 并不仅限于一个 Promise 对象，可以将多个 Promise 对象进行链式调用，这样就可以将耗时长的异步操作拆分成多个小的异步操作，使代码更加简洁易读。
Promise.resolve() .then(() => doSomething1()) .then(() => doSomething2()) .then(() => doSomething3()) .then(() => console.log('操作完成'));
上面这段代码中，分别调用了 doSomething1、doSomething2 和 doSomething3 方法，每个方法都返回一个 Promise 对象，在这几个方法的返回值上建立了一个 Promise 链，最终输出 '操作完成'。
判断异步操作是否成功
在对异步操作进行链式调用时，有时需要判断异步操作是否成功。此时可以使用 then 方法的第二个参数来指定错误处理函数。
Promise.resolve() .then(() => doSomething1()) .then(() => doSomething2()) .then(() => doSomething3()) .then(() => console.log('操作完成')) .catch((error) => console.error(error));
上面这段代码中，通过 catch 方法捕获了前面异步操作可能出现的错误，使其不会影响后续异步操作的执行。
总结
Promise 的 Chaining 使异步编程变得更加简单，利用链式调用，可以将异步操作代码更加组织成易读易懂的形式。本文介绍了 Promise 的 Chaining 使用技巧，希望能够帮助读者更好地应用 Promise。
示例代码
下面是一个 Promise 的 Chaining 示例代码。
-- -------------------- ---- ------- -------- --------- - ------ --- ----------------- ------- -- - ----- --- - --- ----------------- --------------- ----- ---------------------- - ---------- - -- ---------------- --- -- - -- ------------ --- ---- - --------------------------------------- - ---- - ---------- ------------------------ - - -- ----------- - ---------- - ---------- --------------- -- ----------- --- - ---------------------------------------------------- ------------ -- - ----------------------- ------ --------------------------------------------------------- - --------- -- ------------- -- - ---------------------------- -- -------------- -- ----------------------展开代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6522493c95b1f8cacd9b2281
