web-dev-qa-db-fra.com

Renvoyer une promesse Axios d'une fonction

Quelqu'un peut-il expliquer s'il vous plaît pourquoi le retour d'une promesse d'Axios permet un chaînage supplémentaire, mais le retour après l'application d'une méthode then()/catch() ne le fait pas?

Exemple:

const url = 'https://58f58f38c9deb71200ceece2.mockapi.io/Mapss'
    
function createRequest1() {
  const request = axios.get(url)

  request
  .then(result => console.log('(1) Inside result:', result))
  .catch(error => console.error('(1) Inside error:', error))

  return request
}

function createRequest2() {
  const request = axios.get(url)

  return request
  .then(result => console.log('(2) Inside result:', result))
  .catch(error => console.error('(2) Inside error:', error))
}

createRequest1()
.then(result => console.log('(1) Outside result:', result))
.catch(error => console.error('(1) Outside error:', error))

createRequest2()
.then(result => console.log('(2) Outside result:', result))
.catch(error => console.error('(2) Outside error:', error))
<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>

https://jsfiddle.net/nandastone/81zdvodv/1/

Je comprends que les méthodes Promise doivent renvoyer une valeur à chaîner, mais pourquoi existe-t-il une différence entre ces deux méthodes de retour?

javascriptpromiseaxios
25
Matt Stone

Votre premier exemple renvoie la promesse initiale. Votre deuxième exemple retourne une différente promesse, celle créée en appelant catch.

Les différences critiques entre les deux sont les suivantes:

  1. Dans votre deuxième exemple, vous ne transmettez pas la valeur de résolution. La promesse retournée par votre then est résolue avec undefined (la valeur de retour de console.log).

  2. Dans votre deuxième exemple, vous convertissez les rejets en résolutions avec undefined (en retournant le résultat de console.log sur catch). Un gestionnaire catch qui ne lance ni ne retourne une promesse rejetée convertit un rejet en résolution.

L'un des éléments clés des chaînes de promesses est qu'elles transforment le résultat. chaque appel à then ou catch crée une nouvelle promesse, et leurs gestionnaires peuvent modifier ce qui est envoyé en aval lorsque le résultat passe par eux.

Le modèle habituel serait en effet de renvoyer le résultat de la chaîne, mais que les fonctions de la chaîne transforment intentionnellement le résultat ou le transmettent. Normalement, vous n'auriez pas de gestionnaire catch sauf au bout de la chaîne, sauf si vous l'utilisez pour corriger la condition d'erreur (conversion intentionnelle d'un rejet en résolution).

Si vous voulez simplement enregistrer ce qui est passé tout en permettant aux appelants de le voir mais avez-vous voulez renvoyer le résultat de la chaîne pour quelque raison que ce soit, procédez comme suit:

return request
    .then(result => { console.log(result); return result; })
    .catch(error => { console.error(error); return Promise.reject(error); });

ou en utilisant throw:

return request
    .then(result => { console.log(result); return result; })
    .catch(error => { console.error(error); throw error; });
60
T.J. Crowder