JS使用Promise时常见的5个错误总结

Promise 是 JavaScript 异步编程的重要组成部分，它可以帮助我们更好地处理回调地狱问题，提高代码的可读性和可维护性。但是，在使用 Promise 进行编程时，可能会犯一些常见的错误。本文将总结 Promise 的5个常见错误，以及如何避免这些错误。

1. 没有正确处理 Promise 的错误

在编写 Promise 代码时，一定要正确处理错误情况。如果 Promise 处理遇到了错误，它会被 rejected。如果不正确处理错误，那么错误会静默失败，然后在控制台上呈现一个未处理的异常。

正确的处理方法是：

fetch('/api/some.json')
  .then(response => response.json())
  .then(data => {
    // 处理数据
  })
  .catch(error => {
    console.error(error);
  });

2. 返回一个不必要的 Promise 对象

有时候我们可能会看到这样的代码：

function fetchData() {
  return new Promise((resolve, reject) => {
    resolve(fetch('/api/some.json'));
  });
}

这种情况下，没有必要返回 Promise 对象，因为 fetch 已经返回了一个 Promise。

更优雅的写法是：

function fetchData() {
  return fetch('/api/some.json');
}

3. 错误地构建 Promise 链

在串联多个 Promise 对象时，必须正确地构建 Promise 链。

错误的写法是：

Promise.resolve()
  .then(() => {
    return Promise.resolve('A');
  })
  .then(() => {
    return Promise.resolve('B');
  })
  .then(() => {
    console.log('Finished');
  });

在这个例子中，Promise 链没有正确构建。因为 then 方法总是返回一个新的 Promise 对象，Promise.resolve('A') 和 Promise.resolve('B') 是两个不同的 Promise 对象，它们之间是并行执行的。所以在第三个 then 中不能保证前两个 then 已经完成。

正确的写法是：

Promise.resolve()
  .then(() => Promise.resolve('A'))
  .then(() => Promise.resolve('B'))
  .then(() => {
    console.log('Finished');
  });

这样，我们就可以保证前面的 Promise 已经完成，才会执行后面的 Promise。

4. 链式调用时忘记返回 Promise

在链式调用时，必须返回 Promise 对象，否则后面的 Promise 将无法正确执行。以下例子中，getData 没有返回 Promise，导致后面的 then 无法正确执行。

function getData() {
  fetch('/api/data.json')
    .then(res => res.json())
}

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

正确的写法是：

function getData() {
  return fetch('/api/data.json').then(res => res.json());
}

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

5. 没有正确定义 Promise 状态

在创建 Promise 对象时，一定要正确定义 Promise 的状态，即 Promise 执行成功时调用 resolve 方法，执行失败时调用 reject 方法。

以下代码中，Promise 不正确地被定义成了 rejected 状态，没有正确处理 Promise 异常。

const promise = new Promise((resolve, reject) => {
  reject('Error!');
});

promise.then(value => {
  console.log(value);
});

正确的写法是：

const promise = new Promise((resolve, reject) => {
  resolve('OK!');
});

promise.then(value => {
  console.log(value);
}).catch(error => {
  console.error(error);
});

以上就是 JavaScript 中 Promise 使用常见的5个错误以及如何规避这些错误的攻略。