Promise 的 then 方法详解及使用技巧-JavaScript中文网-JavaScript教程资源分享门户

Promise 的 then 方法详解及使用技巧

Promise 是一种非常重要的异步编程解决方案，可以降低回调函数的嵌套，使代码更具可读性和可维护性。Promise 实例有一个 then 方法，可以在 Promise 对象状态变为 resolved 或 rejected 时，分别调用对应的处理函数。本文将详解 Promise 的 then 方法，并提供一些使用技巧和示例代码。

`then` 方法的语法

Promise 实例的 then 方法有两个参数，第一个参数是 resolved 状态时的回调函数，第二个参数是 rejected 状态时的回调函数，语法如下：

promise.then(onResolved, onRejected)

其中，onResolved 和 onRejected 都是函数类型。当 promise 对象的状态变为 resolved 时，会调用 onResolved 函数；当 promise 对象的状态变为 rejected 时，会调用 onRejected 函数。如果不需要处理某个状态的回调函数，可以将其设为 null 或省略不写。

`then` 方法的链式调用

Promise 的 then 方法可以链式调用，即一个 then 方法的返回值是另一个 Promise 对象。这种链式调用的好处是，可以将多个异步操作按照顺序串联起来，形成一个异步操作流程。下面是一个简单的示例代码：

fetch('/url1')
  .then(response => response.json())
  .then(data => fetch('/url2'))
  .then(response => response.text())
  .then(text => console.log(text))

在上面的代码中，先发送一个 GET 请求到 /url1，然后将响应结果解析成 JSON 数据，并调用第二个 then 方法。第二个 then 方法再发送一个 GET 请求到 /url2，然后将响应结果转换成文本，并调用第三个 then 方法输出结果。

`then` 方法的返回值

then 方法返回一个新的 Promise 对象，该对象的状态和值根据上一个 Promise 对象的处理结果而确定。如果 onResolved 回调函数返回一个普通值或没有返回值，则新的 Promise 对象的状态为 resolved，值为该普通值或 undefined。如果 onResolved 回调函数返回一个 Promise 对象，则新的 Promise 对象的状态和值都根据该 Promise 对象的状态和值而定。

同理，如果 onRejected 回调函数返回一个普通值或没有返回值，则新的 Promise 对象的状态为 resolved，值为该普通值或 undefined。如果 onRejected 回调函数返回一个 Promise 对象，则新的 Promise 对象的状态和值都根据该 Promise 对象的状态和值而定。

`then` 方法的错误处理

Promise 的错误处理可以使用 catch 方法或另一个 then 方法的第二个参数。catch 方法用于捕获所有状态为 rejected 的 Promise 对象的错误，而 then 方法的第二个参数则只能捕获当前 Promise 对象的错误。下面是一个错误处理的示例代码：

fetch('/url')
  .then(response => response.json()) // 如果响应状态不为 200，则 Promise 状态为 rejected
  .then(data => {
    // 此处发生错误，会导致 Promise 状态为 rejected
    throw new Error('发生了错误')
  })
  .then(data => console.log(data)) // 不会执行
  .catch(error => console.log(error.message)) // 输出 '发生了错误'

在上面的代码中，第一个 then 方法返回的 Promise 对象的状态可能为 resolved 或 rejected。如果响应状态不为 200，则该 Promise 对象的状态为 rejected，会跳过后续的 then 方法，直接执行 catch 方法。

`then` 方法的使用技巧

then 方法可以被多次调用，但每次调用都返回一个新的 Promise 对象，因此不会影响上一次调用的结果。
如果同时需要处理 resolved 和 rejected 状态的回调函数，可以使用 catch 方法或者在第二个参数中传入 rejected 回调函数。
如果长链式调用的某个节点需要对数据进行一些操作，可以使用一个单独的函数进行处理，并在 then 方法中调用该函数。
如果某个节点需要发生多个异步操作，可以使用 Promise.all 或 Promise.race 方法进行组合。
如果某个节点需要发生多种类型的异步操作，可以使用 async/await 语法糖进行简化。

结语

Promise 是现代 JavaScript 开发中必须掌握的一个重要技能点，掌握 then 方法的使用技巧，可以帮助我们写出更加稳定、可读、可维护的代码。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67c17a25314edc26849b2886

Promise 的 then 方法详解及使用技巧