Obtenir des données grâce à l'API en JavaScript.

Lors de la création d'applications Web, effectuer des requêtes HTTP est une tâche courante. Il existe plusieurs façons de procéder en JavaScript, chacune avec ses propres avantages et cas d'utilisation. Dans cet article, nous explorerons quatre méthodes populaires : fetch(), axios(), $.ajax() et XMLHttpRequest(), avec des exemples simples pour chacune.

1. Utilisation de fetch()
La fonction fetch() vous permet de demander à HTTP de récupérer des ressources sur un réseau. Il utilise des promesses, ce qui facilite la gestion des opérations asynchrones.

Exemple

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

2. Utiliser Axios()
axios() est un client HTTP populaire pour effectuer des requêtes à partir de navigateurs ou d'applications Node.js. Elle est similaire à l'API fetch() intégrée mais inclut des fonctionnalités supplémentaires telles que des intercepteurs de requêtes et de réponses, l'analyse JSON automatique, etc.

Exemple

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

3. Utiliser $.ajax()
Si vous travaillez avec jQuery, vous pouvez utiliser la fonction $.ajax() pour effectuer des requêtes HTTP. Il fournit une interface simple pour effectuer des requêtes AJAX et gérer les réponses.

Exemple

$.ajax({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: function(data) {
    console.log(data);
  },
  error: function(error) {
    console.error('Error:', error);
  }
});

4. Utilisation de XMLHttpRequest()
L'objet XMLHttpRequest fournit un moyen simple de récupérer des données à partir d'une URL sans actualiser la page. C'est un niveau un peu inférieur à fetch() ou à des bibliothèques comme Axios, mais il est toujours largement utilisé dans de nombreuses applications.

Exemple

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(JSON.parse(xhr.responseText));
  } else {
    console.error('Error:', xhr.statusText);
  }
};
xhr.onerror = function() {
  console.error('Request failed');
};
xhr.send();

Dans cet exemple, nous créons un nouveau XMLHttpRequest, ouvrons une requête GET et traitons la réponse en vérifiant le code d'état et en analysant le texte de la réponse.

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!