这些错误是 Axios API 调用的结果吗？

Question

我正在开发后端 API，调用该 API 的 React 前端会随机获得

Network Error

或

Cannot read properties of undefined (reading 'data')

。 我无法重现这种行为。 它正在前端的日志中报告，但没有显示在后端的日志中，据我所知，该请求甚至没有命中 API。 前端使用 Axios 进行 API 调用。 以下是出现这些错误的两个调用的示例。 这段代码中的任何内容可能导致这些错误？

const params = `email=${this.queryParams.email}`;

const response = await axiosStore.axiosApi.get(`/data?${params}`).catch(error => {
    console.error(error);
});
const values = await response.data;

this.setValues(values);

const response = await axiosStore.axiosApi.post(`/data`, { data: mappedChanges }).catch(error => {
    if (error && error.response && error.response.data && error.response.data.errors) {
        const { errors } = error.response.data;
        const message = Object.keys(errors)
            .map(x => errors[x])
            .join(', ');
        throw new Error(message);
    } else {
        throw new Error('Something went wrong');
    }
});
newObject = response.data;

Answer 1

嗯，我猜因为你混合使用await 和catch 可能会导致错误追加。如果您的通话出现错误。如果你捕获它，那么响应对象可能是未定义的。

然后，当您尝试从响应中获取数据时，您将收到此错误。 而且我不确定您是否需要在

response.data

上调用await。你确定这是一个承诺吗？

如果我是你，我会将调用包装到 try catch 中，以便更容易调试

const getStuff1 = async () => {
  const params = `email=${this.queryParams.email}`;
  try {
    const response = await axiosStore.axiosApi.get(`/data? ${params}`);
    const values = response.data;
    this.setValues(values);
  } catch(error) {
    console.error(error);
  }    
};

const getStuff2 = async () => {
  try {
    const response = await axiosStore.axiosApi.post(`/data`,
     { data: mappedChanges }
    );
    newObject = response.data;
  } catch(error) {
    if (error?.response?.data?.errors) {
      const { errors } = error.response.data;
      const message = Object.keys(errors)
            .map(x => errors[x])
            .join(', ');
        // Do something with error
    } else {
        // Do something with error
    }
  }
};