Day 08 JavaScript/Rails XHR、fetch、axios、Rails.ajax 比较

四种非同步请求资料的方法

还记得 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