Fermer

juin 14, 2021

Angular Basics Comment utiliser XHR ou Fetch Request en JavaScript


Surtout pour nos débutants Angular, voici un article sur la différence entre XHR et fetch, et comment les utiliser.

Dans cet article, nous allons apprendre à utiliser XHR et fetch request en JavaScript. Cet article couvre les sujets suivants.

  • Qu'est-ce que XHR ?
  • Comment utiliser XHR en JavaScript ?
  • Qu'est-ce que fetch ?
  • Comment utiliser fetch en JavaScript ?
  • Résumé
  • Conclusion[19659009]Qu'est-ce que XHR ?

    XHR signifie XMLHttpRequestet c'est une API que nous pouvons utiliser pour faire des requêtes AJAX en JavaScript. En utilisant cette API, nous pouvons faire une demande réseau pour échanger des données du site Web au serveur. XHR est utilisé pour faire des requêtes HTTP en JavaScript, mais ce n'est pas l'approche la plus moderne.

    Comment utiliser les requêtes XHR en JavaScript ?

    Les requêtes XHR sont une ancienne méthode en JavaScript pour placer les requêtes HTTP avec des gestionnaires de rappel de liaison, où les méthodes seront appelées en fonction de l'état. Voici les étapes pour utiliser les requêtes XHR en JavaScript :

    Étape 1 : Pour configurer la requête HTTP, nous devons créer une instance de XMLHttpRequestcomme le montre le code ci-dessous :[19659014]var xmlReq = new XMLHttpRequest();

    Étape 2 : Ensuite, ajoutez les gestionnaires de rappel ou les événements pour obtenir le réponse de la requête HTTP :

    function onLoad() {
  console.log(this.réponse);
}


xmlReq.addEventListener("load", onLoad);

    Dans le code ci-dessus, chaque fois que la demande est terminée, le La méthode onLoad y récupère la réponse.

    Voici quelques événements supplémentaires :

    • onreadystatechange : cet événement est déclenché lorsque l'attribut readyState change d'état .
    • abort : l'événement est déclenché lorsque la demande est abandonnée.
    • error : l'événement est déclenché lorsque la demande contient une erreur.
    • load : cet événement est déclenché lorsque la demande est terminée.
    • loadend : cet événement est déclenché lorsque la demande est terminée ou obtient une erreur.
    • loadstart : cet événement est déclenché lorsque la demande charge les données.
    • progress : cet événement est déclenché lorsque la demande obtient des données en morceaux.
    • timeout : ce L'événement est déclenché lorsque la demande est terminée en raison du temps.

    Étape 3: Ensuite, nous devons initialiser la demande créée. Pour cela, la méthode open est utilisée avec les paramètres comme le montre le code ci-dessous :

    Syntax

    XMLHttpRequest.open(method , url[, async[, utilisateur[, mot de passe][19659017]]])

    Utiliser

    xmlReq.open("GET", " https://my-json-server.typicode.com/JSGund/XHR-Fetch-Request-JavaScript/profile");

    Dans le code ci-dessus, nous plaçons le HTTP Demande de méthode GETdonc le premier paramètre est GET et le deuxième paramètre est URL à partir de laquelle nous prévoyons d'extraire les données.

    Voici quelques autres méthodes :

    • abort : il annule la demande si déjà envoyée.
    • getAllResponseHea ders : il renvoie tous les en-têtes de réponse ou null s'il n'y a pas de réponse.
    • getResponseHeader : il renvoie la valeur d'en-tête particulière en lui passant le nom de l'en-tête comme paramètre.
    • overrideMimeType : il remplace le type envoyé par le serveur ; nous devons appeler cette méthode avant la méthode open.
    • send : Elle envoie la requête créée au serveur.
    • setRequestHeader : Elle définit la valeur de l'en-tête de requête HTTP ; nous devons l'appeler après la méthode open.

    Étape 4 : Dans la dernière étape, nous devons appeler la méthode send pour envoyer la requête au serveur :

    xmlReq.send();

    XHR Request Example

    Dans cet exemple de démonstration, nous avons placé la méthode GET et dans la réponse, nous obtenons une liste de blogs au format JSON et nous l'analysons. La réponse renvoyée que nous avons liée à la liste ordonnée HTML, comme vous pouvez le voir dans la sortie.

    xhr-request.html file

    
<html>
 <head>
<title>Requête XHR</title>
</head[19659017]>
<body>
<div>
<h1>Article de Jeetendra Gund</ h1>
<div id="blogs">< /div>
</div>
<script>
(function(){
var xhr = new  XMLHttpRequest()
xhr.open('GET', 'https://my-json-server.typicode.com/JSGund/XHR-Fetch-Request-JavaScript /postes')


xhr.onload = function() {
	if (xhr.status != 200) {
console.log('Error')
	return
	}
var data = JSON .parse(xhr.response)
var html = '
      '

données.pourChaque(fonction(dt){
html += '
    1. <a href="'+dt.chemin+'">'+ dt.titre+'
      2. '      
})

html += '
    '    
document.getElementById('blogs').innerHTML = html
}

xhr.onError = fonction() {
console.log('La demande a échoué')
}

xhr.envoyer();
})()
    </script>
</body>
</html>

    Sortie

    Articles de Jeetendra Gund, avec une liste numérotée de titres d'articles liés.

    Qu'est-ce que Fetch ?

    Fetch est un moyen moderne de faire des demandes dans JavaScript similaire à XMLHttpRequest. Fetch n'est pas basé sur des gestionnaires de rappel, il est basé sur des promesses. C'est un code API simple, lisible et propre qui est facile à comprendre.

    Comment utiliser Fetch Request en JavaScript ?

    L'API Fetch utilise la promesse dont nous avons besoin pour résoudre l'objet de réponse, et pour cela nous utilisons la méthode .then après la fonction fetch. Il renvoie la promise qui contient la réponse.

    Syntaxe

    fetch(resource [, init])

    Parameters

    • resource : Dans ce paramètre, vous pouvez passer l'URL à laquelle vous accédez les données ou vous pouvez transmettre l'objet Request.
    • init : c'est un paramètre facultatif, mais utilisez-le si vous souhaitez transmettre d'autres paramètres avec un objet de demande comme méthode, corps, en-têtes, mode, informations d'identification, redirection, etc. vous pouvez donc passer comme le code ci-dessous :
    fetch('sample.json',{
méthode: 'get',
mode: 'cors'
});

    Exemple

    fetch('https : //my-json-server.typicode.com/JSGund/XHR-Fetch-Request-JavaScript/posts')
.then(response => réponse.json())
.puis(fonction (réponse ) {
console.log(response);
})
.catch(fonction[19659025](erreur) {
console.log('erreur', erreur);
});

    Dans l'exemple ci-dessus, vous pouvez voir que nous avons utilisé deux méthodes then et une méthode catch pour détecter les erreurs. Dans la première méthode puis nous obtenons la réponse mais elle n'est pas dans un format lisible, nous l'avons donc convertie en JSON. Et avec la deuxième méthode puis nous obtenons le résultat réel au format JSON.

    Exemple de requête de récupération

    Dans cet exemple de démonstration, nous avons placé la méthode GET et dans la réponse que nous obtenons une liste de blogs au format JSON. La réponse renvoyée que nous avons liée à la liste ordonnée HTML, comme vous pouvez le voir dans la sortie.

    fetch-request.html file

    
<html>
 <head>
<title>Demande de récupération</title>
</head[19659017]>
<body>
<div>
<h1>Article de Jeetendra Gund</ h1>
<div id="blogs">< /div>
</div>
<script>
(function(){
fetch('https://my-json-server.typicode.com/JSGund/XHR- Fetch-Request-JavaScript/posts')
.then(result => result.json([19659017]))
.puis(fonction (réponse) {

var html  = '
      '
réponse.pourChaque(fonction(dt){
html += '
    1. <a href="'+dt.chemin+'">'+ dt.titre+'
      2. '      
});

html += '
    '    
document.getElementById('blogs').innerHTML = html
})
.prise(fonction (erreur) {
console.log('erreur', erreur);
});
 })()
    </script>
</body>
</html>

    Sortie

    On retrouve la même liste que précédemment : Articles de Jeetendra Gund, avec une liste numérotée de titres d'articles liés.

    Résumé

    Dans cet article, nous avons discuté à la fois de XHR et de fetch, et de la façon de les utiliser pour envoyer des requêtes au serveur en JavaScript.

    • XHR est une ancienne méthode pour envoyer des requêtes au serveur. L'API Fetch est un moyen moderne de faire des requêtes au serveur.
    • Le chaînage est difficile dans XHR, mais dans Fetch, vous pouvez facilement enchaîner les promesses.
    • Dans XHR, nous devons vérifier la propriété status pour les erreurs, mais dans fetch, la méthode catch est là pour gérer les erreurs.

    Vous pouvez télécharger les deux exemples à partir de ici.

    Si vous avez des suggestions ou des questions concernant cet article, veuillez me contacter en utilisant les liens dans ma bio.

    « Apprenez-le, partagez-le ».

Le meilleur outil 2023 pour ta croissance Instagram !



Source link