useEffect内调用API获取数据时的错误处理方案

你现有代码的错误是try/catch的放置位置错误：你将同步执行的useEffect钩子调用包裹在try/catch中，而异步请求的错误发生在后续执行的getData异步函数内部，属于异步微任务，外层的同步try/catch完全无法捕获到这部分错误。

将try/catch放在异步函数内部，包裹await请求逻辑即可捕获异常，同时需要注意GraphQL接口的特殊规则：即使请求返回200状态码，也可能在响应体中携带业务错误，需要额外判断处理：

async function contactAPI() {
  return await axios({
    url: 'https://graphqlexample.com/products/api',
    method: 'post',
    data: {
      query: `
      QUERY GOES HERE
        `
    }
  })
}

function App() {  
  const [products, setProducts] = useState([]);
  // 可新增错误状态用于前端页面提示用户
  const [error, setError] = useState(null);

  useEffect(() => {
    async function getData() {
      try {
        const resp = await contactAPI();
        // 处理GraphQL返回的业务错误
        if (resp.data.errors) {
          throw new Error(resp.data.errors.map(item => item.message).join(';'))
        }
        setProducts(resp.data.data.products);
      } catch (err) {
        console.log("there was an error:", err);
        setError(err);
      }
    }
    getData();
  }, []);    

  return (
    // JSX GOES HERE
  );
}

• 也可以不用async/await语法，直接在Promise链末尾加.catch()处理错误：contactAPI().then(resp => { // 处理响应 }).catch(err => { // 处理错误 })
• 如果项目请求逻辑较多，推荐使用React Query、SWR这类专门的请求状态管理库，内置了统一的错误处理、重试、缓存能力，不需要手动维护异步请求的各类边界状态。

内容的提问来源于stack exchange，提问作者bourne2077