Promise.finally 的使用及注意事项-JavaScript中文网-JavaScript教程资源分享门户

Promise.finally 是 Promise 新增的方法之一，它会在 Promise 执行结束后无论结果是成功还是失败都会执行。本文将介绍 Promise.finally 的使用及注意事项。

Promise.finally 的使用

Promise.finally() 接收一个回调函数作为参数，这个回调函数会在 Promise 执行结束后调用。无论 Promise 的状态是 resolved 还是 rejected，这个回调函数都会被调用，同时它也不会改变 Promise 的状态值。

下面是 Promise.finally() 的基本用法：

promise.finally(() => {
  // some code
});

Promise.finally 的注意事项

虽然 Promise.finally() 是一种非常方便的方法，但是我们仍需要注意一些细节。

1. Promise.finally() 不会改变 Promise 的状态

Promise.finally() 不会改变 Promise 的状态，它只是在 Promise 执行结束后执行一些操作。比如下面这个例子：

new Promise((resolve, reject) => {
  console.log('Promise');
  resolve('resolve');
}).finally(() => {
  console.log('finally');
});

输出的结果为：

Promise
finally

这说明在 Promise 执行成功后，Promise.finally() 依然会执行。

2. Promise.finally() 的返回值和 Promise 没有关系

Promise.finally() 的返回值和 Promise 本身没有关系，它只是返回一个新的 Promise 对象。Promise.finally() 返回的 Promise 对象会使用它自己的状态值和原来的 Promise 对象的状态值相同，同时它自己的值是 undefined。

3. Promise.finally() 的回调函数必须是同步的

Promise.finally() 的回调函数必须是同步的，否则它可能不会按照你预期的顺序执行。比如下面这个例子：

// javascriptcn.com 代码示例
Promise.resolve(1)
  .finally(() => {
    console.log('finally');
    setTimeout(() => {
      console.log('setTimeout');
    }, 0);
    return 'return';
  })
  .then((res) => {
    console.log('then');
    console.log(res);
  });

输出的结果为：

finally
then
1
setTimeout

可以看到，setTimeout() 是在 then() 之后执行的，但是回调函数中的 return 是不会影响 Promise 状态的，所以 then() 还是会输出 1。

示例代码

以下是一个示例代码，其中使用了 Promise.finally()。

// javascriptcn.com 代码示例
function fetchData() {
  return fetch('https://example.com/api/data')
    .then((res) => {
      if (!res.ok) {
        throw new Error('Fetch failed');
      }
      return res.json();
    })
    .catch((err) => {
      console.error(err);
      return null;
    })
    .finally(() => {
      console.log('fetchData finished');
    });
}

fetchData().then((data) => {
  console.log(data);
});

这个示例代码中，如果 fetch 请求失败将会输出错误信息，如果 fetch 请求成功将会输出获取数据结束的信息。在无论成功还是失败的情况下，Promise.finally() 都会被正确地调用。

总结

Promise.finally() 是一个十分有用的方法，它可以让我们更好地控制 Promise 在执行结束后的一些操作，同时它也是需要我们注意一些细节的，例如回调函数必须是同步的，它的返回值和 Promise 本身没有关系等等。正确地使用 Promise.finally() 可以让我们代码更加健壮和易于维护。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65413d777d4982a6ebae144e