Le Javascriptfetch()>méthode utilisée pour récupérer des ressources sur un serveur. Il renvoie une promesse, résolue en objet Response, qui encapsule la réponse du serveur à la requête.fetch()>facilite l'exécution des requêtes GET, généralement utilisées pour récupérer des données, et POSTE requêtes, utilisées pour publier des données sur des serveurs.

En outre, fetch()> intègre de manière transparente avancé HTTP des fonctionnalités telles que Partage de ressources entre origines croisées (CORS) et d'autres extensions, enrichissant l'expérience de développement Web avec une sécurité et une interopérabilité améliorées.

Remarque : L'API Fetch est fournie avec la méthode fetch(), qui est utilisée pour récupérer des données à partir de différentes sources.

Syntaxe:

commande sed

fetch('url') // api for the get request .then(response =>réponse.json()) .then(data => console.log(data));>

Paramètres:

• URL : L'URL à laquelle la demande doit être effectuée.
• Possibilités : C'est un ensemble de propriétés. C'est un facultatif paramètre. Les options disponibles sont :
  • Méthode: Spécifie la méthode HTTP pour la demande. (peut être GET, POST, PUT ou DELETE)
  • En-têtes
  • Corps: Données à envoyer avec la demande.
  • Mode: Spécifie le mode de requête (par ex. cors, nocors, même origine, etc.)
  • Informations d'identification : Spécifie s'il faut envoyer les informations d'identification de l'utilisateur (cookies, en-têtes d'authentification, etc.) avec la demande

Exemples de méthodes JavaScript fetch()

Examinons quelques exemples de la méthode fetch. Ces exemples vous fournissent une compréhension complète de la méthode fetch en JavaScript.

1 . Obtenir une demande à l'aide de Fetch

Cet exemple montre comment effectuer une requête Get dans la méthode fetch.

Note: Sans options, Fetch agira toujours comme une requête get.

// API for get requests let fetchRes = fetch( 'https://jsonplaceholder.typicode.com/todos/1');   // FetchRes is the promise to resolve // it by using.then() method fetchRes.then(res =>res.json()).then(d => { console.log(d) })>

Sortir:

Explication:

1. La fonction JS fetch() est utilisée pour envoyer une requête GET à l'URL https://jsonplaceholder.typicode.com/todos/1. Cette fonction renvoie une promesse qui se résout en un objet Response représentant la réponse à la demande.
2. La méthode then() est chaînée à l'appel fetch() pour gérer la réponse de manière asynchrone. Dans la fonction de rappel passée à then(), la méthode res.json() est appelée pour analyser le corps de la réponse au format JSON. Cette méthode renvoie également une promesse qui résout les données JSON analysées.
3. Une autre méthode then() est chaînée pour gérer les données JSON analysées. Dans sa fonction de rappel, les données JSON analysées d sont enregistrées sur la console à l'aide de console.log()

2 . Utiliser fetch pour publier des données JSON

Dans cet exemple, nous avons téléchargé des données JSON à l'aide de l'API fetch() en JavaScript, vous pouvez définir le corps de la requête sur une version chaîne JSON de vos données et définir les en-têtes appropriés pour indiquer que vous envoyez du JSON.

Les demandes de publication peuvent être effectuées à l'aide de fetch en donnant les options ci-dessous :

let options = { method: 'POST', headers: { 'Content-Type': 'application/json;charset=utf-8' }, body: JSON.stringify(data) }>

Après avoir vérifié la syntaxe de la demande de publication, regardez l'exemple ci-dessous qui montre l'utilisation de la demande de publication dans la méthode fetch.

// Your JSON data const jsonData = { key1: 'value1', key2: 'value2' }; // Set up options for the fetch request const options = {  method: 'POST',  headers: {  'Content-Type': 'application/json' // Set content type to JSON  },  body: JSON.stringify(jsonData) // Convert JSON data to a string and set it as the request body }; // Make the fetch request with the provided options fetch('https://api.example.com/upload', options)  .then(response =>{ // Vérifiez si la requête a réussi if (!response.ok) { throw new Error('La réponse réseau n'était pas correcte');  } // Analyse la réponse en JSON return réponse.json();  }) .then(data => { // Gère les données JSON console.log(data); }) .catch(error => { // Gère les erreurs survenues lors de la récupération console.error('Erreur de récupération : ', erreur);  });>

Explication:

• Nous définissons vos données JSON.
• Nous configurons les options pour la demande de récupération, y compris la méthode définie sur « POST », l'en-tête Content-Type défini sur « application/json » et le corps défini sur la version chaîne JSON de vos données.
• Nous effectuons la requête de récupération avec les options fournies en utilisant la fonction fetch().
• Le reste du code reste le même qu'auparavant, gérant la réponse et les erreurs qui se produisent lors de la récupération.

3. Abandon d'une demande d'extraction

Vous pouvez utiliser le Abandonner le contrôleur et Interface de signal d'abandon pour abandonner une requête de récupération en JavaScript.

lire à partir d'un csv java

// Create a new AbortController instance const controller = new AbortController(); const signal = controller.signal; // Make the fetch request with the signal const fetchPromise = fetch('https://api.example.com/data', { signal }); // Timeout after 5 seconds const timeoutId = setTimeout(() =>{ contrôleur.abort(); // Abandonner la requête de récupération console.log('Requête de récupération expirée'); }, 5000); // Gérer la requête de récupération fetchPromise .then(response => { // Vérifier si la requête a réussi if (!response.ok) { throw new Error('La réponse réseau n'était pas correcte'); } // Analyser le réponse en JSON return réponse.json(); }) .then(data => { // Gérer les données JSON console.log(data); }) .catch(error => { // Gérer les erreurs survenues pendant le fetch console.error('Fetch error:', error }) .finally(() => { clearTimeout(timeoutId); // Effacer le délai d'attente });>

Explication:

• Nous créons une nouvelle instance AbortController et obtenons son signal.
• Nous effectuons la requête de récupération en utilisant fetch() avec les options fournies.
• Nous définissons un délai d'attente de 5 secondes en utilisant setTimeout() pour abandonner la demande de récupération si elle prend trop de temps.
• À l’intérieur du rappel du délai d’attente, nous appelons controller.abort() pour abandonner la demande de récupération.
• Nous traitons la demande de récupération comme d'habitude, y compris l'analyse de la réponse et la gestion des erreurs.
• Enfin, dans le bloc enfin(), nous effaçons le délai d'attente à l'aide de clearTimeout() pour empêcher le déclenchement du délai d'attente si la demande d'extraction se termine avant l'expiration du délai d'attente.

Envoi d'une demande incluant les informations d'identification

Pour envoyer une demande incluant des informations d'identification, telles que biscuits , dans une demande d'extraction, vous pouvez définir la propriété d'informations d'identification à inclure.

fetch('https://example.com', { credentials: 'include', });>

Si vous souhaitez envoyer des informations d'identification uniquement si l'URL de la requête se trouve sur la même origine que le script appelant, ajoutez les informations d'identification : « même origine ».

// The calling script is on the origin 'https://example.com' fetch('https://example.com', { credentials: 'same-origin', });>

Cas d'utilisation de la méthode JavaScript fetch()

Voici quelques cas d’utilisation de la méthode fetch. Il s'agit de problèmes courants auxquels les développeurs débutants sont confrontés lorsqu'ils travaillent avec fetch.

1. Comment utiliser l'API JavaScript Fetch pour obtenir des données

La requête JavaScript Get est utilisée pour récupérer des données à partir d'un serveur. Pour utiliser l'API Fetch en JavaScript pour obtenir des données d'un serveur, vous pouvez effectuer une requête GET à l'URL souhaitée et gérer la réponse.

2. Méthode Get et Post à l'aide de l'API Fetch

Une méthode fetch() peut être utilisée avec tout type de requête telle que POSTE , OBTENIR , METTRE, et SUPPRIMER , La méthode GET utilise l'API fetch

3. Différence entre Fetch et Axios pour faire des requêtes http

Axios est un package tiers autonome qui peut être facilement installé et Fetch est intégré à la plupart des navigateurs modernes ; aucune installation n'est requise en tant que telle.

Navigateurs pris en charge :

JavaScript Fetch est un ECMAScript6 (ES6) fonctionnalité et est pris en charge sur presque tous les navigateurs modernes comme :

• Google Chrome
• Bord
• Firefox
• Opéra
• Safari