web-dev-qa-db-fra.com

Fetch: rejette la promesse et intercepte l'erreur si le statut n'est pas OK?

Voici ce que j'ai à faire:

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;
}

EDIT: La promesse n'est pas rejetée, c'est ce que j'essaie de comprendre.

J'utilise ce chercher polyfill dans Redux avec redux-promise-middleware .

javascriptreduxfetch-api
18
Vlady Veselinov

Fetch promet uniquement de rejeter avec une erreur TypeError lorsqu'une erreur réseau se produit. Comme les réponses 4xx et 5xx ne sont pas des erreurs de réseau, il n'y a rien à attraper. Vous devrez créer une erreur vous-même pour utiliser Promise#catch.

A fetch Response fournit commodément une ok , qui vous indique si la requête a abouti. Quelque chose comme ça devrait faire l'affaire:

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)
});
53
fny

Merci pour l’aide apportée à tous, le fait de refuser la promesse de .catch() a résolu mon problème:

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;
}
7
Vlady Veselinov

Je viens de vérifier le statut de l'objet de réponse:

$promise.then( function successCallback(response) {

  console.log(response);

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

});
1
Torsten Barthel