React Axios catch not triggered

Question

私はReactを習得しようとしています。私はXHR API呼び出しを行うためにAxiosと協力しています。私のやることと同じように、最初に行うことはドキュメントを読むことです。リクエストが.then()句ではなく.catch句のトリガーされます失敗したときに、どういうわけかhttps://github.com/svrcekmichal/redux-axios-middleware#dispatch-action

：私は上の文書、次のXHR呼び出しを実装しました。

私は間違っていることについて私の頭を殴っています。私はそれを理解することができません。

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以下は、私がAxiosを実装する方法があります出力：

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

ログインでは非同期呼び出しが行われず、オブジェクトを返すだけでエラーは発生しません。そのため、常に「成功」​​に終わります。そしてconsole.log（レスポンス）は、常にloginによって返されたオブジェクトを出力します。

単純にオブジェクトを返す代わりに、実際には非同期要求を行う必要があります。実際にリクエストを行う方法はdispatch(login(credentials))です。

ところで、あなたが得たエラーはログインとは関係なく、App.jsのaxios.createで起きました