未触发 React Axios 捕获

Question

我正在尝试学习 React，并且正在使用 Axios 进行 XHR API 调用。因此，就像我所做的一切一样，要做的第一件事就是阅读文档。我按照以下文档实施了 XHR 调用：https://github.com/svrcekmichal/redux-axios-middleware#dispatch-action

不知何故，当请求失败时，触发的是 .then() 子句而不是 .catch 子句。

我正在为出了什么问题而绞尽脑汁，但我无法弄清楚。下面是我如何实现 Axios:

App.js:

const client = axios.create({
  baseURL:'http://localhost:8080/api',
  responseType: 'json'
});

const axiosMiddle = axiosMiddleware(client)
const createStoreWithMiddleware = applyMiddleware(thunk, axiosMiddle)(createStore)

Component.js:

handleLogin(event) {
  const credentials = {
    username: this.state.username,
    password: this.state.password
  }
  this.props.login(credentials)
    .then((response) => {
      console.log(response)
      console.log('SUCCESS')
    })
    .catch((response) => {
      console.log('ERROR')
    })
}

Action.js:

export function login(credentials) {
  return {
    type: ['LOAD','AWESOME','OH_NO'],
    payload: {
      request: {
        url: '/login/',
        method: 'POST',
        data: {
          username: credentials.username,
          password: credentials.password
        }
      }
    }
  }
}

并且 console.log 输出：

HTTP Failure in Axios Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:87)
Root.jsx:82 {type: "LOAD,AWESOME,OH_NO_FAIL", error: {…}, meta: {…}}error: {data: "Network Error", status: 0}meta: {previousAction: {…}}type: "LOAD,AWESOME,OH_NO_FAIL"__proto__: Object
Root.jsx:83 SUCCESS

慢慢地我快疯了，不知道怎么解决。有人可以帮我吗？

Answer 1

在 component.js 中，您的登录没有执行任何异步调用，相反，它只是 returns 一个对象，那里不会发生错误，这就是为什么它总是以 "SUCCESS" 结束. console.log(response) 总是打印登录返回的对象。

因此，您实际上应该执行异步请求，而不是简单地返回对象。实际执行请求的方式是dispatch(login(credentials))。

顺便说一句，你得到的错误与登录无关，它发生在 App.js 中的 axios.create。

未触发 React Axios 捕获

React Axios catch not triggered

javascript

reactjs

axios