四種非同步請求資料的方法

還記得 Day 06 有提到非同步請求資料的方法有 XHR、fetch、axios、Rails.ajax 嗎?
這四種都可以拿來打 API。
XHR 是最原始的方法，使用起來也比較繁瑣，需要設定很多值，因為很古老的關係，筆者也沒使用過。
fetch 比 XHR 好用一點，axios 跟 Rails.ajax 又比 fetch 更方便。
以下來簡單介紹fetch、axios、Rails.ajax 的差異。

fetch axios Rails.ajax 比較

• fetch
  • 需要先將資料轉成 JSON格式才能繼續 then 下去
  • 內建在網頁裡，不用額外引入套件
  • 無法防止 CSRF 跨站請求偽造
  • 預設無法中斷 HTTP 請求
  • 只對網路或跨網域噴錯，對 4xx、5xx 都當做成功的請求，需要封裝去處理
• axios
  • 可以自動將資料轉成 JSON格式
  • 需額外引入套件
  • 可以防止 CSRF 跨站請求偽造
  • 可以中斷 HTTP 請求
  • 若是使用 Rails 來做非同步請求，因為 Rails 自帶 csrf token 防護機制，需要先拿到合法 token，才能成功
• Rails.ajax
  • 跟 axios 差不多
  • 需額外引入套件
  • 不用另外去拿 token 也可以做非同步請求

範例

// fetch
fetch('url')
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.log(error))
// axios
const url = `網址`;
const token = document.querySelector("meta[name=csrf-token]").content;
ax.defaults.headers.common["X-CSRF-Token"] = token;

axios.get('url')
  .then((response) => console.log(response))
  .catch((error) => console.log(error))
// Rails.ajax
Rails.ajax({
  url: 網址,
  type: "post",
  data: "",
  success: (data) => {
    console.log(data)
  },
  error: function (err) {
    console.log(err);
  },
});

[1]非同步請求xhr、ajax、axios與fetch的區別比較
[2]Difference between Fetch and Axios.js for making http requests