解决 ES8 async/await 报错 Unhandled promise rejection 的问题

在使用 ES8 async/await 语法时，我们有时会遇到 Unhandled promise rejection 的报错，这是因为当 await 的 Promise 被 reject 时，没有被 catch 处理，从而引发了错误。本文将带你深入了解这个问题，并提供解决方案。

什么是 Unhandled promise rejection

Promise 是 JavaScript 中处理异步操作的一种方法，它通过 then 和 catch 处理链式调用。当 Promise 被成功 resolve 时，then 中的函数会被执行；而如果被 reject，则会执行 catch 中的函数。但是，如果一个 Promise 被 reject，但是没有被任何 catch 捕获到，那么就会抛出 Unhandled promise rejection 异常。

解决 Unhandled promise rejection 的方法

可以通过以下方法解决 Unhandled promise rejection 的问题：

1. 使用 try-catch 包裹 async 函数

使用 try-catch 包裹 async 函数，可以捕获 async 函数内部的错误并进行处理。如下所示：

async function myFunc() {
  try {
    const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const data = await res.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

2. 使用 .catch 处理 Promise 错误

使用 .catch 处理 Promise 错误是另一种方法。如下所示：

async function myFunc() {
  const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  const data = await res.json();
  console.log(data);
}

myFunc().catch(error => console.error(error));

3. 在 Promise 中使用 reject

在 Promise 中使用 reject 可以主动抛出错误并被 catch 捕获。如下所示：

async function myFunc() {
  const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  const data = await res.json();

  if (!data) {
    return Promise.reject('数据为空');
  }

  console.log(data);
}

myFunc().catch(error => console.error(error));

4. 使用 ESLint 或者 TypeScript 等工具提前捕获错误

使用 ESLint 或者 TypeScript 等工具可以帮助我们在编译时或者代码检查时提前捕获错误，避免 Unhandled promise rejection 的出现。如下所示：

// ESLint 配置
{
  "rules": {
    "no-unhandled-promises": "error"
  }
}

// TypeScript 使用 Promise.reject 抛出错误
async function myFunc(): Promise<void> {
  const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  const data = await res.json();

  if (!data) {
    return Promise.reject('数据为空');
  }

  console.log(data);
}

myFunc().catch(error => console.error(error));

总结

我们可以使用 try-catch 和 .catch 方法来捕获 async/await 中的错误，并使用 Promise.reject 在 Promise 中主动抛出错误，避免 Unhandled promise rejection 的出现。此外，使用工具如 ESLint 或 TypeScript 可以帮助我们更早地发现这些错误，提高代码质量和稳定性。

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