web-dev-qa-db-fra.com

Demande Ajax en es6 Vanilla javascript

Je suis capable de faire une requête ajax en utilisant jquery et es5 mais je veux me transférer du code pour que sa Vanilla et utilise es6. Comment cette demande changerait-elle? (Remarque: j'interroge l'API de Wikipedia).

      var link = "https://en.wikipedia.org/w/api.php?action=query&prop=info&pageids="+ page +"&format=json&callback=?";

    $.ajax({
      type: "GET",
      url: link,
      contentType: "application/json; charset=utf-8",
      async: false,
      dataType: "json",
      success:function(re){
    },
      error:function(u){
        console.log("u")
        alert("sorry, there are no results for your search")
    }
javascriptjqueryajaxapiecmascript-6
8
sacora

Vous utiliserez probablement fetch API :

fetch(link, { headers: { "Content-Type": "application/json; charset=utf-8" }})
    .then(res => res.json()) // parse response as JSON (can be res.text() for plain response)
    .then(response => {
        // here you do what you want with response
    })
    .catch(err => {
        console.log("u")
        alert("sorry, there are no results for your search")
    });

Si vous voulez faire asynchrone , c'est impossible. Mais vous pouvez le faire ressembler à une opération non asynchrone avec la fonction Async-Await .

19
termosa

Les requêtes AJAX sont utiles pour envoyer des données de manière asynchrone, obtenir une réponse, la vérifier et l'appliquer à la page Web actuelle en mettant à jour son contenu.

function ajaxRequest()
{
    var link = "https://en.wikipedia.org/w/api.php?action=query&prop=info&pageids="+ page +"&format=json&callback=?";
    var xmlHttp = new XMLHttpRequest(); // creates 'ajax' object
        xmlHttp.onreadystatechange = function() //monitors and waits for response from the server
        {
           if(xmlHttp.readyState === 4 && xmlHttp.status === 200) //checks if response was with status -> "OK"
           {
               var re = JSON.parse(xmlHttp.responseText); //gets data and parses it, in this case we know that data type is JSON. 
               if(re["Status"] === "Success")
               {//doSomething}
               else 
               {
                   //doSomething
               }
           }

        }
        xmlHttp.open("GET", link); //set method and address
        xmlHttp.send(); //send data

}
1
Giulio Bambini

De nos jours, vous n'avez pas besoin d'utiliser jQuery ou une API. C'est aussi simple que cela:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
    console.log(this.responseText);
  }
};
xmlhttp.open('GET', 'https://www.example.com');
xmlhttp.send();
0
daaawx