ハンドルエラー応答React.js

Question

私の春のブートコントローラ方法：

export default (data) => (dispatch) => { 
    dispatch({ 
    type: initHandler 
    }); 

    fetchJSON(url, 'POST', data) 
    .then((json) => { 
     dispatch({ 
     type: successHandler, 
     apiResponse: json 
     }) 
    }) 
    .catch((error) => { 
     dispatch({ 
     type: failureHandler, 
     apiResponse: error, 
     apiMessage : "System encountered error. Please try again later." 
     }) 
    }) 
} 

そしてfetchJSONが反応して、私のutilのクラスのいずれかで定義される：

@RequestMapping(value = "/test", method = RequestMethod.POST) 
    @ResponseBody 
    public ResponseEntity<APIResponseMessage> testMethod(@RequestBody MyPojo myPojo) { 
     APIResponseMessage resp = new APIResponseMessage(); 
     try { 
      serviceObj.callServiceMethod(myPojo); 
      resp.setMessage("successfull!"); 
     } catch (Exception e) { 
      resp.setMessage("failed!"); 
      return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(resp); 
     } 
     return ResponseEntity.ok(resp); 
    } 

は、アクションハンドラクラスには、次のメソッドを持っていリアクト次のように：

export const checkStatus = response => { 
    const hasError = (response.status < 200 || response.status >= 300) 
    if (hasError) { 
    const error = new Error("This is an error") // I want to set my message that I obtained from the controller here. 
    throw error 
    } 
    return response 
} 

export const parseJSON = response => response.json() 

export const fetchJSON = (url, method, data) => { 
    return fetch(url, { 
    method: method, 
    headers: new Headers({ 
     'Content-Type': 'application/json' 
    }), 
    body: JSON.stringify(data) 
    }).then(checkStatus).then(parseJSON); 
} 

私のAPIから得たカスタムメッセージをerroに設定するrオブジェクト。私は多くのオプションを試しましたが、動作させることができませんでした。

Answer 1

問題はプロミスが解決されているか、それを使用しようとすると解決されないことです。 'response.json（）'を呼び出すと約束が返されますが、通常の実行フローでエラーを投げないと、この約束は解決され、結果を処理することができます。

しかし、エラーがスローされると、catchブロックのエラーを解決するか、 '.then（）'する必要があります。

私は、これはのcheckStatus機能で）最初の（あなたのresponse.textを投げ、あなたのために働くべきだと思う：

if (hasError) { 
    throw response.json() 
} 

お約束でエラーを投げているので、最寄のキャッチ、または拒否コールバックがありますこの場合には

.catch((error) => { 
    dispatch({ 
    type: failureHandler, 
    apiResponse: error, 
    apiMessage : "System encountered error. Please try again later." 
    }) 
}) 

「エラー」「）（response.text」を呼び出すことによって作成された未解決の約束があるので、次のように）error.then（の「派遣」をラップすることにより、この問題を解決することができます。呼び出されました：

.catch((error) => { // error is a Promise 
    error.then((e) => { 
     dispatch({ 
      type: failureHandler, 
      apiResponse: e, // e is now the resolved value of 'response.text()' 
      apiMessage : "System encountered error. Please try again later." 
     }); 
    }); 
}) 

ここでは簡略化して示しています。https://jsfiddle.net/LLL38vea/