javascript - 由于 fetch/axios 无法正确将错误传递给 catch 块，导致应用程序“崩溃”

Question

axios我有一个小的 React 应用程序，它通过UseEffect()钩子获取一些资源。该应用程序本身在调试中运行良好。但是，当我尝试测试我的应用程序的构建版本时，它会“崩溃”，也就是说，除了设置正文背景颜色之外，它不会渲染任何内容。

在调试模式下，应用程序显示 0 个错误或警告，构建的唯一线索是TypeError's 用于内置的特定于类型的方法，例如，.map()所有这些都方便地存在于使用. 经过一些测试后，我得出结论，“崩溃”的原因是（并且），由于我不知道的原因，在未成功获取块时不会将错误传递给块，而是尝试使用 undefined执行，其中，反过来，没有像or这样的方法，导致整个应用程序“崩溃”。.filter().toLowerCase()axiosaxiosfetch().catch().then()data.map().toLowerCase()TypeError

我试图用 重写所有axios包含的组件fetch()，但结果是一样的。我自己发现的最接近的事情是这个对 React Native（而不是普通的 React）的答案，它建议将console.error()（这会使应用程序崩溃）更改为console.log()，但它在我的情况下几乎不适用，因为我根本不使用console.error()。

您可以在下面找到一个用于获取数据的示例组件axios：

import axios from 'axios';
import { useState, useEffect } from 'react';

const Salute = () => {
  const [user, setUser] = useState('john doe');

  useEffect(() => {
    axios
      .get('/api/user?id=1')
      .then(({ data: { fullName } }) => setUser(fullName.toLowerCase()))
      .catch((err) => console.log(err));
  }, []);

  return (
    <div className='salute'>
      <h1>
        hi, it's <span id='username'>{user}</span>
      </h1>
    </div>
  );
};

export default Salute;

标签： javascriptreactjsaxiosfetchuse-effect

Answer 1

我的问题的根本原因原来是错误的 API，它发送带有200状态代码的错误消息，而这又被解释axios/fetch()为正常响应。

这里的关键点（至少对我而言）是在获取逻辑中至少实现一些最小的数据验证，以防止出现此类情况。就我而言，我做了以下事情（直到我使用的 API 得到修复）：

import axios from 'axios';
import { useState, useEffect } from 'react';

const Salute = () => {
  const [user, setUser] = useState('john doe');

  useEffect(() => {
    axios
      .get('/api/user?id=1')
      .then(({ data }) => {

        if (typeof data.fullName === 'string') {
          setUser(data.fullName.toLowerCase());
        } else {
          console.log('[AXIOS GET] Wrong data type: ' + typeof data.fullName);
        }
      })
      .catch((err) => console.log('[AXIOS GET]', err));
  }, []);

  return (
    <div className='salute'>
      <h1>
        hi, it's <span id='username'>{user}</span>
      </h1>
    </div>
  );
};

export default Salute;