iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
Modern Web

網頁前後端寶石庫-礦坑補完計畫系列 第 8

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


上一篇
Day 07 JavaScript/Rails API
下一篇
Day 09 CORS 跨來源資源共用
系列文
網頁前後端寶石庫-礦坑補完計畫30

1 則留言

1
王天君
iT邦新手 5 級 ‧ 2021-09-23 23:25:59

巧遇修哥!
一起加油!

阿修 iT邦新手 5 級 ‧ 2021-09-24 00:16:39 檢舉

讚喔 一起加油!!!

我要留言

立即登入留言