JS 原生寫法處理 AJAX

XMLHttpRequest

透過建立一個XMLHttpRequest物件，開啟一個 URL 並發送請求，此為較為傳統的方式
範例如下

// 建立一個 XMLHttpRequest 物件
let xhr = new XMLHttpRequest();

// 使用 open() 發送請求，並且需要帶入三個參數
// 參數分別是 HTTP方法、處理請求的網址、取得資料的方式（同步/非同步）
xhr.open('GET','URL',true);

// 送出請求，小括號內可帶入其他參數進行傳送
xhr.send();

// 從伺服器取得資料後的處理
xmr.onload = function() {
  // 處理回傳資料的程式碼
  console.log('成功');
};
xhr.onerror = function (err) {
  console.log('錯誤', err)
};

Fetch

直接進入範例！

使用 Fetch 發送請求範例如下

fetch('發送請求的URL')
  .then(function(response) {
    // 成功結果的處理
  }).catch(function(err) {
    // 錯誤結果的處理
  })

使用 Fetch 發出請求，會回傳一個包含 response 物件的 promise

以下範例使用 https://randomuser.me/api/

fetch('https://randomuser.me/api/')
  .then(function(response) {
    console.log(response);
  }).catch(function(err) {
    console.log('錯誤', err);
  })

執行結果

如何從 response 取得需要的資料

回傳的 response 可以透過以下幾種方式取得資料

• arrayBuffer()：將資料轉成二進制的資料
• blob()：將資料轉成 blob 物件
• formData()：將資料轉成 formData 物件
• json()：將資料解析為 JSON
• text()：將資料轉成 text 格式

將 response 轉成 JSON 格式

fetch('https://randomuser.me/api/')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
  console.log(myJson);
  })
  .catch(function(err) {
    console.log('錯誤', err);
  })

執行結果

參考資料及學習資源

• 0 陷阱！0 誤解！8 天重新認識 JavaScript！
• JavaScript 指南
• 六角學院 - JavaScript 必修篇 - 前端修練全攻略
• Using Fetch

本日小結

怎麼有點越級了...我在寫什麼，說好的初心者解任務呢
後面有幾會再來進階介紹 fetch 的用法，讓我花一點時間研究一下
這是我的學習紀錄，我們下次見～