如何在catch子句中访问axios错误响应对象？

Question

我最近升级到 axios 0.23.0，现在在尝试访问 catch 子句中的错误响应对象时收到错误。这是我收到错误的地方：

  const loginUser = async (userData: UserPayload): Promise<void> => {
    try {
      const result = await login(userData);
      const { token } = result.data;
      localStorage.setItem('jwtTokenTS', token);
      setupAxios(token);
      const decoded: User = jwt_decode(token);
      setUser(decoded);
      setAuthenticated(true);
    } catch (err) {
      if (err.response.status === 404) {
        window.alert('User not found');
      } else if (err.response.status === 401) {
        window.alert('Incorrect password');
      } else {
        console.error(err);
      }
    }
  };

第 3 行的“登录”功能是我的 axios 请求，如下所示：

export async function login(user: UserPayload): Promise<AxiosResponse<{ token: string }>> {
  return axios.post(`${bConfig.backend}/login`, user);
}

我收到的确切错误是在尝试访问“err.response.status”时：

对象的类型为“未知”.ts(2571)（本地变量）错误：未知

任何有关如何消除此错误的想法将不胜感激，我已尝试在 catch 子句中键入错误，但打字稿也不喜欢这样。

Answer 1

更新：正如 @matas-ramanauskas 在另一个答案中提到的，Axios 提供了内置类型保护（请参阅https://github.com/axios/axios/pull/3546/files）。当被检查的对象为 null 时，内置类型保护也应该能够处理，因为error.isAxiosError如果错误为 null，则会返回错误。

我还更新了下面的代码，以error在检查属性之前检查是否不为 null 或未定义isAxiosError。

从 TypeScript 4.4 开始，catch 子句变量现在默认从任何类型到未知类型，除非配置为不这样做。这允许更安全的处理，因为它强制用户在使用之前检查 catch 子句中捕获的值的类型。要消除该错误，您需要使用类型保护来缩小对象的可能类型范围，以便让 TypeScript 知道它正在处理什么类型。

你可以这样做：

const isAxiosError = (error: unknown): error is AxiosError => {
  return error && (error as AxiosError).isAxiosError;
};

try {
  // ...
} catch (err) {
  if (isAxiosError(err) && err.response) {
    if (err.response.status === 404) {
      window.alert('User not found');
    } else if (err.response.status === 401) {
      window.alert('Incorrect password');
    } else {
      console.error(err);
    }
  } else {
    console.error(err);
  }
}

你可以看看我专门针对这个场景制作的指南。 https://www.linkedin.com/posts/michael-bonon_handling-typed-errors-in-typescript-44-activity-6865161464236400640-MkWB