es6 바닐라 자바스크립트에서 Ajax 요청

es6 바닐라 자바스크립트에서 Ajax 요청

jquery와 es5를 이용하여 ax 요청을 할 수 있지만 바닐라와 es6를 사용할 수 있도록 코드를 전환하고 싶습니다.이 요청은 어떻게 바뀝니다.(참고: 위키백과의 api를 문의합니다.)

      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")
    }

아마도 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")
    });

비동기화하지 않으려면 불가능합니다.그러나 Async-Await 기능을 사용하면 비동기화되지 않는 것처럼 보일 수 있습니다.

AJAX 요청은 데이터를 비동기적으로 전송하고 응답을 얻고 확인한 후 내용을 업데이트하여 현재 웹 페이지에 적용하는 데 유용합니다.

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

}

요즘은 jQuery나 API를 사용할 필요가 없습니다.이렇게 하는 것만큼 간단합니다.

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();

언급URL : https://stackoverflow.com/questions/47906665/ajax-request-in-es6-vanilla-javascript