Axios 和 Typescript 给出一个类型的 promise 拒绝错误

Posted 2023-02-18

【中文标题】Axios 和 Typescript 给出一个类型的 promise 拒绝错误

【英文标题】：Axios & Typescript give error from promise rejection a type

【发布时间】：2021-12-10 12:59:56

【问题描述】：

我目前面临的问题是我不能使用从承诺拒绝返回的错误，因为它不能用 Typescript 输入。例如，当注册请求因用户名已被占用而失败时，我会返回 400 和 message username already taken。但我无法访问来自错误的消息，因为无法键入来自 try catch 的 error 对象。 axios 有什么方法可以处理这种情况，并且可以让我使用自定义类型访问错误对象吗？ 或者我应该在数据下创建一个错误对象，然后在服务器有200 时将其返回为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,
    )
  

【参考方案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`