Existe-t-il des raisons d'utiliser axios à la place de la récupération ES6

Question

J'ai étudié la documentation d'axios et de fetch ES6 que les deux sont assez similaires et ont connu une forte influence de $ .ajax et de ses raccourcis.

Le principal avantage d'axios est la prise en charge du navigateur.

Alors ai-je raison de dire que si j'utilise babel-polyfill - il n'y a aucune raison d'utiliser axios?

Answer 1

Quelques raisons pour l'utilisation d'Axios plus de Fetch:

1. La capacité de surveiller la demande de progrès

C'est plus une question entre XMLHttpRequest (qui alimente axios) ou Chercher de l'API.

Chercher de l'API actuellement ne fournit pas de moyen d'être notifié de la demande, une caractéristique qui les pouvoirs mécanisme de rétroaction pour les téléchargements de gros fichiers par exemple.

Axios, d'autre part, a cette fonctionnalité intégrée:

axios.post('/api', data, {
    onUploadProgress: ({ total, loaded }) => {
        // update progress
    }),
})

2. Erreur de manipulation

Lorsque votre backend retours 500 Internal Server Error code de réponse, fetch ne sera pas traiter toute différente de la 200 OK.

C'est un inconvénient dans la plupart des cas, puisque tous vos hypothèses précédentes de ce qu'est une réponse ressemblerait ne sont plus valides.

Le plus souvent, lors de la réception d'une réponse erronée à partir du serveur que vous souhaitez annuler le pipeline de traitement aussitôt que possible, et de passer à une erreur de manipulation cas.

fetch(url)
    .then(reponse => {
        if (!(status >= 200 && status < 300)) {
            return Promise.reject(new Error("Invalid response status"));
        }

        return response;
    })
    .then(response => response.json())
    .then(/* normal processing */)
    .catch(/* error handling */);

Ce n'est pas difficile à réaliser, mais vous auriez probablement souhaitez capturer cette logique sous peu d'abstraction pour éviter la répétition, et cela nous rapproche un peu plus de Web API d'abstraction qui est Axios.

Axios un sane chose et rejette la promesse si la réponse renvoie statut erroné. Ce comportement est personnalisable, comme le sont la plupart des choses avec de l'axios.

3. Les tests

Axios a moxios, chercher a fetch-dérision.

Ces deux bibliothèques sont grands, mais dans mon expérience, fetch-mock requis d'installation supplémentaires pour obtenir Plaisanterie à utiliser moqué de récupérer plus de polyfilled un.

J'aime aussi le fait qu' moxios.wait() retourne une promesse qui sera résolu après avoir correspondant à la demande.

4. D'autres fonctionnalités qui Axios offre

Par exemple, vous pouvez configurer un intercepteur qui va ajouter de la clé api pour tous les paramètres de la demande, ou de surveiller les demandes actives pour afficher un écran de chargement.

---

Raisons pour l'utilisation de l'une ou l'autre peut varier de réelles exigences de commodité.

Si vous avez besoin de suivre les progrès, l'utilisation d'Axios (ou XMLHttpRequest).

Si vous êtes à la rédaction d'un travailleur des services, utilisation de Fetch.

Sinon, utiliser ce qui est plus pratique pour vous.

Answer 2

Ce:

fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    body: JSON.stringify({
      title,
      body
    })
  }).then((res) => {
    if (res.ok) {
      return res.json()
    }

    throw new Error(res.responseText);

  })
  .then((data) => console.log(data))
  .catch((err) => console.log(err))

peut essentiellement être exprimé par axios avec ceci:

axios.post('https://jsonplaceholder.typicode.com/posts', {
    title,
    body
  }).then((data) => console.log(data))
  .catch((err) => console.log(err))

Donc, en substance:

1. Pas besoin de faire de res.json(), res.text() etc
2. Aucun besoin de manipuler res.ok afin d'attraper non 200 erreurs en réalité de la promesse catch gestionnaire.
3. Pas besoin de stringify la charge utile, il est géré par axios par défaut.

Ensemble axios est un plus haut niveau et à mon avis plus simple de travailler avec de point de vue design, de l'api pour le traitement des demandes.

Answer 3

Axios est une bibliothèque NPM et fonctionne donc à la fois sur Node.js et sur le navigateur. fetch est une API Web et n'est pas disponible pour Node. Inversement, Node.js a le module http et n'a pas l'API Fetch. Il simplifie également la transmission de données et la gestion de différents types de requêtes HTTP