Comment choisir entre Fetch et Axios

Dans cet article, nous allons voir comment choisir entre Fetch et Axios pour faire des requêtes HTTP.

L’une des parties les plus essentielles du développement du frontend est la communication avec le backend en effectuant des requêtes HTTP.

LIRE AUSSI: Comment créer un intercepteur http en Angular ?

Il existe plusieurs façons d’effectuer des appels d’API en Javascript de manière asynchrone.

Il y a quelques années, la plupart des applications envoyaient des requêtes HTTP en utilisant Ajax, qui signifie Javascript asynchrone et XML. Mais à l’heure actuelle, les développeurs décident principalement de la sélection entre l’API fetch () et Axios.

Choisir entre Fetch et Axios

Dans cet article, j’aimerais comparer ces deux méthodes, passer en revue la présentation et la syntaxe de base, cela doit vous donner une idée pour choisir entre Fetch et Axios dans projet de développement.

En plus de cela, je comparerai le processus de conversion des données au format JSON dans les deux cas et la gestion des erreurs également.

Je vais également parler de l’interception HTTP et de la progression du téléchargement.

Vue d’ensemble et syntaxe de Fetch

Lorsque nous construisons un projet Javascript, nous pouvons utiliser un objet window, et il est livré avec de nombreuses méthodes intéressantes que nous pouvons utiliser dans le projet.

L’une de ces fonctionnalités est l’API Fetch, qui fournit une méthode .fetch() simple et globale, qui est une solution logique pour récupérer les données de l’API de manière asynchrone.

Jetons un œil à la syntaxe de la méthode .fetch ().

fetch(url)
  .then((res) => 
    // handle response
  )
  .catch((error) => {
    // handle error
  })

 

Dans l’exemple ci-dessus, vous pouvez voir la syntaxe d’une simple requête Fetch GET.

Dans la méthode .fetch (), nous avons une URL d’argument obligatoire.

Il renvoie une promesse, qui peut être résolue avec l’objet Response.

Le deuxième argument de la méthode .fetch () sont des options, et il est facultatif.

Si nous n’acceptons pas les options, la requête est toujours GET et télécharge le contenu à partir de l’URL donnée.

Dans le paramètre options, nous pouvons passer des méthodes ou des en-têtes, donc si nous souhaitons utiliser la méthode POST ou toute autre, nous devons utiliser ce tableau facultatif.

Comme je l’ai mentionné précédemment, la promesse renvoie l’objet Response, et à cause de cela, nous devons utiliser une autre méthode pour obtenir le corps de la réponse.

Il existe différentes méthodes que nous pouvons utiliser, en fonction du format du corps dont nous avons besoin:

• response.json()
• response.text()
• response.formData()
• response.blob()
• response.arrayBuffer()

Jetons un coup d’œil à l’exemple de code avec un paramètre facultatif.

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
});
  .then((response) => response.json())
  .catch((error) => console.log(error))

 

Dans l’exemple de code ci-dessus, vous pouvez voir la simple requête POST avec les paramètres headers et body.

Ensuite, j’utilise la méthode json() pour convertir la réponse au format JSON.

Maintenant, regardons de plus près les axios.

Présentation et syntaxe d’Axios

Axios est une bibliothèque Javascript pour faire des requêtes HTTP à partir de Node.js ou XMLHttpRequests ou navigateur.

En tant que bibliothèque moderne, elle est basée sur l’API Promise.

axios présente certains avantages tels que la protection contre XSRF ou l’annulation de requêtes.

Pour pouvoir utiliser la bibliothèque axios, nous devons l’installer et l’importer dans notre projet.

axios peut être installé à l’aide de CDN, npm ou bower.

Examinons maintenant la syntaxe d’une méthode GET simple.

axios.get(url)
  .then(response => console.log(response));
  .catch((error) => console.log(error));

 

Dans le code ci-dessus, vous pouvez voir comment j’utilise axios pour créer une simple requête GET en utilisant la méthode .get ().

Si vous souhaitez utiliser la méthode POST dans la fonction, il suffit d’utiliser la méthode .post () à la place et de transmettre les données de la requête en tant que paramètre.

Lorsque nous créons un objet de configuration, nous pouvons définir un tas de propriétés, les plus courantes sont:

• baseUrl
• params
• headers
• auth
• responseType

En réponse, axios renvoie une promesse qui se résoudra avec l’objet de réponse ou un objet d’erreur. Dans l’objet de réponse, il existe les valeurs suivantes:

• data, qui est le corps de la réponse réelle
• status, statut HTTP de l’appel, comme 200 ou 404
• statusText, état HTTP renvoyé sous forme de message texte, par exemple, ok
• headers, le serveur renvoie les en-têtes
• config, demande de configuration
• request, l’objet XMLHttpRequest

Pour l’instant, jetons un œil à l’exemple de code avec la méthode POST avec des données.

axios.post({
  '/url', 
  { name: 'John', age: 22},
  { options }
})

 

Dans le code ci-dessus, vous pouvez voir la méthode post, où nous mettons l’objet de configuration en tant que paramètre, avec une URL, des données et des options supplémentaires.

Nous pouvons également définir l’objet de configuration comme une variable et le passer à l’axios comme dans l’exemple ci-dessous.

const config = {
  url: 'http://api.com',
  method: 'POST',
  header: {
    'Content-Type': 'application/json'
  },
  data: {
    name: 'John',
    age: 22
  }
}

axios(config);

Ici, vous pouvez voir que tous les paramètres, y compris l’URL, les données ou la méthode, se trouvent dans l’objet de configuration, il peut donc être plus facile de tout définir au même endroit.

JSON

Comme je l’ai mentionné précédemment, lorsque nous utilisons la méthode .fetch (), nous devons utiliser une sorte de méthode sur les données de réponse, et lorsque nous envoyons le corps avec la requête, nous devons stringifier les données.

Dans axios, cela se fait automatiquement, donc nous transmettons simplement des données dans la requête ou obtenons des données à partir de la réponse. Il est automatiquement stringifié, donc aucune autre opération n’est requise.

Voyons comment nous pouvons obtenir des données à partir de fetch () et d’axios.

// fetch
fetch('url')
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.log(error))

// axios
axios.get('url')
  .then((response) => console.log(response))
  .catch((error) => console.log(error))

 

Dans l’exemple ci-dessus, vous pouvez voir qu’avec axios, nous n’avons pas de ligne de code supplémentaire, où nous devons convertir les données au format JSON, et nous avons cette ligne dans l’exemple .fetch (). Dans le cas d’un projet plus important où vous créez beaucoup d’appels, il est plus confortable d’utiliser axios pour éviter de répéter le code.

 

La gestion des erreurs

À ce stade, nous devons également donner des points pour axios car la gestion des erreurs est assez facile.

S’il y a une mauvaise réponse comme 404, la promesse sera rejetée et renverra une erreur, nous devons donc attraper une erreur, et nous pouvons vérifier de quel type d’erreur il s’agissait, c’est tout.

Voyons l’exemple de code.

axios.get('url')
  .then((response) => console.log(response))
  .catch((error) => {
    if (error.response) {
      // When response status code is out of 2xx range 
      console.log(error.response.data)
      console.log(error.response.status)
      console.log(error.response.headers)
    } else if (error.request) {
      // When no response was recieved after request was made
      console.log(error.request)
    } else {
      // Error
      console.log(error.message)
    }
  })

 

Dans le code ci-dessus, j’ai renvoyé des données lorsque la réponse était bonne, mais si la demande a échoué de quelque manière que ce soit, j’ai pu vérifier le type d’erreur dans la partie .catch () et renvoyer le message approprié.

Avec la méthode .fetch (), c’est un peu plus compliqué. Chaque fois que nous recevons une réponse de la méthode .fetch (), nous devons vérifier si l’état est un succès car même si ce n’est pas le cas, nous obtiendrons la réponse.

En cas de .fetch (), la promesse ne sera pas résolue uniquement lorsque la demande ne sera pas traitée. Voyons l’exemple de code.

fetch('url')
  .then((response) => {
    if (!response.ok) {
      throw Error(response.statusText);
    }
    return response.json()
  })
  .then((data) => console.log(data))
  .catch((error) => console.log(error))

Dans ce code, j’ai vérifié le statut du code dans l’objet de promesse, et si la réponse avait le statut ok, alors je pourrais traiter et utiliser la méthode .json (), mais sinon, je devais renvoyer une erreur à l’intérieur. ().

Pour une gestion facile et correcte des erreurs, axios sera certainement une meilleure solution pour votre projet, mais quand même, si vous construisez un petit projet avec une ou deux requêtes, vous pouvez utiliser .fetch (), mais vous devez vous rappeler de gérer erreurs correctement.

Progression du téléchargement

Lorsque nous devons télécharger une grande quantité de données, un moyen de suivre la progression serait utile, en particulier lorsque les utilisateurs ont une connexion Internet lente.

Auparavant, pour implémenter les indicateurs de progression, les développeurs utilisaient le rappel XMLHttpRequest.onprogress. Dans .fetch () et axios, il existe différentes manières de le faire.

Pour suivre la progression du téléchargement dans .fetch (), nous pouvons utiliser l’une des propriétés response.body, un objet ReadableStream. Il fournit des données corporelles bloc par bloc et nous permet de compter la quantité de données consommée dans le temps.

Dans axios, l’implémentation d’un indicateur de progression est également possible, et c’est encore plus facile car il existe un module prêt, qui peut être installé et implémenté; il s’appelle Axios Progress Bar.

Si vous avez beaucoup de données volumineuses à télécharger et que vous souhaitez suivre l’indicateur de progression en cours, vous pouvez gérer cela plus facilement et plus rapidement avec axios, mais .fetch () offre également la possibilité, juste il a besoin de plus de code pour être développé pour le même résultat.

Interception HTTP

L’interception HTTP peut être importante lorsque nous devons vérifier ou modifier nos requêtes HTTP de l’application vers le serveur, ou dans l’autre sens, par exemple, pour l’authentification.

Dans le cas d’axios, l’interception HTTP est l’une des fonctionnalités clés de cette bibliothèque, c’est pourquoi nous n’avons pas à créer de code supplémentaire pour l’utiliser. Jetons un coup d’œil à l’exemple de code pour voir à quel point nous pouvons le faire facilement.

// request interceptor
axios.interceptors.request.use((config) => {
  console.log('Request sent');
})

// response interceptor
axios.interceptors.response.use((response) => {
  // do an operation on response
  return response
})

axios.get('url')
  .then((response) => console.log(response))
  .catch((error) => console.log(error))

 

Dans le code, vous pouvez voir l’interception de demande et l’interception de réponse. Dans le premier cas, j’ai créé un console.log informant de l’envoi de requêtes, et dans l’interception de réponse, nous pouvons faire n’importe quelle action sur la réponse, puis la renvoyer.

.fetch () ne fournit pas l’interception HTTP par défaut, il est possible d’écraser la méthode .fetch () et de définir ce qui doit se passer lors de l’envoi de la requête, mais bien sûr, cela prendra plus de code et peut être plus compliqué que d’utiliser la fonctionnalité axios.

 

Conclusion

Dans cet article sur comment choisir entre Fetch et Axios, j’ai comparé les deux méthodes les plus utilisées pour créer des requêtes HTTP, en commençant par un simple aperçu, à travers la syntaxe et certaines fonctionnalités importantes comme la progression du téléchargement ou la gestion des erreurs.

Cette comparaison montre qu’Axios est une meilleure solution dans le cas d’une application où il y a beaucoup de requêtes HTTP qui nécessitent une bonne gestion des erreurs ou des interceptions HTTP. Dans le cas de petits projets, avec juste quelques appels d’API simples, Fetch peut également être une bonne solution.

Il est très important de prêter attention à un autre facteur lors du choix de la meilleure solution pour votre projet. Axios est également pris en charge par la plupart des navigateurs et l’environnement Node.JS lorsque Fetch n’est pris en charge que par les navigateurs modernes et peut en avoir émis avec les plus anciens.

Avec ces connaissances, j’espère que vous serez en mesure de sélectionner la meilleure solution pour vous et que cette comparaison vous sera utile.

Merci pour la lecture.