axios请求中的Redux工具包错误处理

mspsb9vt  于 2022-11-05  发布在  iOS
关注(0)|答案(1)|浏览(159)

在Thunk函数中,我正在进行post http请求,如果出现错误,我希望处理它=〉显示从服务器到用户的消息,比如email已经存在或者其他。但是我如何正确定义try{}catch{}语法中的错误type。使用以下代码,我在终端x1c 0d1x中遇到错误

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from "axios";
import { FormSignUp } from '../../types/FormSignUP';

export const signupUser = createAsyncThunk('user/signupUser', async (user: FormSignUp) => {
  try {
    const response = await axios.post(API_URL, user);
    return response.data
  } catch (err: Error) {
    console.log(err.response.data)
  }
});

我知道在axios请求中正确的err类型是AxiosError。但是下一个代码是另一个错误。

import axios, { AxiosError } from "axios";

export const signupUser = createAsyncThunk('user/signupUser', async (user: FormSignUp) => {
  try {
    const response = await axios.post(API_URL, user);
    return response.data
  } catch (err: AxiosError) {
    console.log(err.response.data)
  }
});

这是错误

编辑:所以,这类作品。

try {
    const response = await axios.post(API_URL, user);
    return response.data
  } catch (err) {
    if (axios.isAxiosError(err) && err.response) {
      console.log( err.response.data);
    }
  }
jtjikinw

jtjikinw1#

Typescript 4.0增加了指定未知和任何捕获变量(问题)的能力,它不能在catch内进行类型转换。
使用此标志,现在可以执行以下操作:
Reference this
而不是:

try {
    const response = await axios.post(API_URL, user);
    return response.data
} catch (err) {
    if (axios.isAxiosError(err) && err.response) {
      console.log( err.response.data);
  }
}

你能做到的

try {
    const response = await axios.post(API_URL, user);
    return response.data
} catch (_err) {
   let err = (_err as AxiosError)
   // and you now got the error type
}

相关问题