Axios 和 Typescript 从 promise rejection 类型中给出错误

Question

我目前面临的问题是我无法使用承诺拒绝中的 returned 错误，因为它无法使用 Typescript 键入。例如，当注册请求因用户名已被使用而失败时，我 return a 400 with the message username already taken。但是我无法从错误中访问消息，因为无法键入 try catch 中的 error 对象。
axios 有什么办法可以处理这种情况，并且可以让我访问自定义类型的错误对象吗？
或者我应该只在数据下创建一个错误对象，并且当服务器有一个 200 或 return 错误对象时，将其 return 作为 null？

示例：

export interface ErrorRes {
  statusCode: number;
  error: string;
  message: string;
}

export interface ISignupRes {
  token: string;
  user: IUser;
  message: string;
}

const handleSignUp = async () => {
  setLoading(true)
  try {
    const { data, status }: { data: ISignupRes; status: number } =
      await coreApi.post('/auth/signup', {
        email,
        username,
        firstname,
        lastname,
        password,
      })
    if (status === 200) {
      Storage.save(true, 'token', data.token)
      addNotification({
        type: 'success',
        message: data.message,
      })
    } else {
      // this never get's called because if the response returns an error it get's catched
      addNotification({
        type: 'error',
        message: data.message,
      })
    }
    setLoading(false)
  } catch (error) {
    // the error is of type `unkown` to I can't access `error.message`
    setLoading(false)
    addNotification({
      type: 'error',
      message: error.message,
    })
  }
}

Answer 1

Typescript 无法验证 axios 错误是您的代码唯一可能抛出的错误，因此 typescript catch 块中的错误始终是 unknown 或 any.您的编译器设置显然更喜欢 unknown.

要将错误视为其他错误，您需要输入一些代码来检查抛出的错误类型，或者您需要使用类型断言来坚持打字稿您知道类型是什么。幸运的是，axios 库包含一个可以为您进行检查的辅助函数，并且它具有适当的类型来缩小错误对象的范围：

} catch (error) {
  if (axios.isAxiosError(error) {
    // inside this block, typescript knows that error's type is AxiosError<any>
    setLoading(false)
    addNotification({
      type: 'error',
      message: error.message,
    })
  } else {
    // In this block, error is still of type `unknown`
  }
}

Axios 和 Typescript 从 promise rejection 类型中给出错误

Axios & Typescript give error from promise rejection a type

try-catch

typescript

reactjs

axios

unhandled-promise-rejection