老师好,dispatch的catch不被触发

来源:20-3 收集登录数据及完成登录功能

Panda_io

2023-07-16

我的dispatch是这样的

    dispatch(loginAction(params))
    .then((action) => {
      console.log(action)
      message.success('登录成功')
      navigate('/')
    })
    .catch((error) => {
      message.error('error')
    })

store的异步设这样写的

export const loginAction = createAsyncThunk("user/loginAction", async (payload: UserApi.LoginParam) => {
   return await userApi.getToken(payload)
})

我先把后端服务关了,那么这个请求一定会超时报错

结果login页面中的dispatch().then().catch(),中并没有触发catch,而是触发了then(),这是打印的then的参数,也就是说即使失败了,diapatch也认为是成功的,只是把错误信息给带回来了,有点不能理解为啥是这样,直接触发catch多好,这样就不用去判断了

{
    "type": "user/loginAction/rejected",
    "meta": {
        "arg": {
            "username": "panda",
            "password": "123456"
        },
        "requestId": "Jk8otrRUGQ9V4OPak93Nu",
        "rejectedWithValue": false,
        "requestStatus": "rejected",
        "aborted": false,
        "condition": false
    },
    "error": {
        "name": "AxiosError",
        "message": "Network Error",
        "stack": "AxiosError: Network Error\n    at XMLHttpRequest.handleError (http://localhost:8080/static/js/bundle.js:68015:14)",
        "code": "ERR_NETWORK"
    }
}
写回答

1回答

西门老舅

2023-07-16

你好,这个主要看后端的处理,有时候后端是会返回状态码200的,而把错误信息通过json数据来体现。当然后端也可以返回不是成功的状态码,比如500等等,这样就会走catch,所以走then还是catch主要是后端处理不同导致的,所以最好then还catch都进行错误的处理,或跟后端确定情况再处理错误形式。 

0
2
西门老舅
回复
Panda_io
这种情况最好检查一下代码,正常来说网络不通,是会走catch的
2023-07-17
共2条回复

Vue3 + React18 + TS4入门到实战 系统学习3大热门技术

专为初级前端人员设计,系统性学习三大技术

261 学习 · 182 问题

查看课程