AJAX -axios套件學習筆記

非同步JS原生寫法：XMLHttpRequest、Fetch

XMLHttpRequest

function reqListener () {
  console.log(this.responseText);
}
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("GET", "http://www.example.org/example.txt");
oReq.send();

Fetch

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

套件 axios

axios

axios.get('/user/12345')
  .then(function (response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

let ary = [];
axios.get("https://hexschool.github.io/ajaxHomework/data.json")
　　　.then(function (response) {
　　　　ary = response .data;
　　　　renderData(); // 資料回傳後執行
});
function renderData(){
　　console.log(ary);
}
console.log(ary); // 先執行 []

1. https://developer.mozilla.org/zh-TW/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
2. https://developer.mozilla.org/zh-TW/docs/Web/API/Fetch_API/Using_Fetch
3. https://github.com/axios/axios