Comment détecter les erreurs avec les promesses de récupération : pourquoi le rejet conditionnel ne fonctionne pas ?

Détecter les erreurs avec les promesses de récupération : rejet conditionnel

Dans les applications Redux, les développeurs utilisent souvent la récupération pour les requêtes asynchrones. Cependant, la gestion des erreurs lorsque la requête échoue peut être difficile, surtout si la requête renvoie un code d'état non OK.

Considérez l'extrait de code suivant :

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

L'objectif est de rejeter la promesse et détectez l'erreur dans le réducteur si le code d'état n'est pas OK. Cependant, le code ne fonctionne pas comme prévu : la promesse n'est pas rejetée.

Comprendre les promesses de récupération

Les promesses de récupération ne sont rejetées qu'avec une TypeError lorsqu'une erreur réseau se produit . Les réponses avec des codes d'état 4xx ou 5xx ne sont pas considérées comme des erreurs réseau, l'erreur n'est donc pas générée.

Lancement d'erreurs personnalisées

Pour détecter ces erreurs non liées au réseau, nous pouvons générer manuellement une erreur si le code d'état indique une requête ayant échoué :

function fetchVehicle(id) {
  return fetch(`http://swapi.co/api/vehicles/${id}/`)
    .then(response => {
      if (!response.ok) {
        throw new Error('Something went wrong');
      }
      return response.json();
    })
    .catch(error => {
      console.log(error);
    });
}

Maintenant, si la requête renvoie un code d'état non OK, cela déclenchera le gestionnaire d'erreurs et enregistrera le message d'erreur. Le réducteur peut alors gérer cette erreur de manière appropriée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!