web-dev-qa-db-ja.com

フェッチ：ステータスがOKでない場合、約束を拒否し、エラーをキャッチしますか？

私が行っていることは次のとおりです。

import 'whatwg-fetch';

function fetchVehicle(id) {
    return dispatch => {
        return dispatch({
            type: 'FETCH_VEHICLE',
            payload: fetch(`http://swapi.co/api/vehicles/${id}/`)
                .then(status)
                .then(res => res.json())            
                .catch(error => {
                    throw(error);
                })
            });
    };
}

function status(res) {
    if (!res.ok) {
        return Promise.reject()
    }
    return res;
}

編集：約束は拒否されません、それは私が理解しようとしているものです。

私はこれを fetch polyfill Reduxで redux-promise-middleware とともに使用しています。

javascriptreduxfetch-api
35
Vlady Veselinov

Fetch は、ネットワークエラーが発生した場合、TypeErrorでのみ拒否を約束します。 4xxおよび5xxの応答はネットワークエラーではないため、キャッチするものは何もありません。 Promise#catchを使用するには、自分でエラーをスローする必要があります。

fetch response は、便宜的に ok を提供し、リクエストが成功したかどうかを示します。このような何かがトリックを行う必要があります：

fetch(url).then((response) => {
  if (response.ok) {
    return response.json();
  } else {
    throw new Error('Something went wrong');
  }
})
.then((responseJson) => {
  // Do something with the response
})
.catch((error) => {
  console.log(error)
});
85
fny

.catch()の約束を拒否してくださった皆さん、ありがとうございます。私の問題は解決しました。

export function fetchVehicle(id) {
    return dispatch => {
        return dispatch({
            type: 'FETCH_VEHICLE',
            payload: fetch(`http://swapi.co/api/vehicles/${id}/`)
                .then(status)
                .then(res => res.json())    
                .catch(error => {
                    return Promise.reject()
                })
            });
    };
}


function status(res) {
    if (!res.ok) {
        throw new Error(res.statusText);
    }
    return res;
}
8
Vlady Veselinov

応答オブジェクトのステータスを確認しました。

$promise.then( function successCallback(response) {

  console.log(response);

  if( response.status === 200 ) { ... }

});
1
Torsten Barthel