由前端request 的幾種方法

jQuery and Axios and fetch

寫了前端一段時間了，常常因為不同的專案使用不同的request方式而產生困惑，為了更加熟悉這些方法，所以我便整理了我目前常用到的幾個 Javascript常用的請求方法：

1. XMLHttpRequest
2. jQuery ajax
3. fetch
4. axios

XMLHttpRequest

應該沒有人在不透過libary或是前端框架的情況下做出一個get請求的吧？，即使如此還是需要知道在 JavaScript 中可使用 XMLHttpRequest的方法，但其實一般來說不會有人這樣寫(我在舊的專案還真的遇到XD)，主要原因也是難以閱讀及撰寫，大多都會使用框架或是library 來處理這段，如 jQuery, Axios…，先介紹如何透過原生Javascript產生 GET 請求：

XMLHttpRequest GET 請求

由上面的範例可以發現，上面的程式碼並不是那麼的容易閱讀，更何況一個網站通常不只做一次request，假設要做很多次request，就要寫很長的一段request，於是便有人發展了一些libary以及framework，不需要在另外自己包裝發送的物件，首先是介紹目前最泛用的jQuery。

jQuery

雖然很多的框架已經有包含Http Request，但許多舊的網站還是以jQuery作為主要使用的libary，自然就會使用jQuery所提供的ajax方法，詳細的使用方法可以參考官方文件．

jQuery GET 請求

然而目前使用jQuery有以下的問題：

1. 基於原生的XHR開發，XHR本身的架構不清晰，並且有了替代方案(Fetch)
2. jQuery的整個項目太大(3.4.1版約為86kb)，單純使用ajax卻要引入整個jQuery的非常的不合理
3. 因為整個項目太大，現在前端流行的Single Page Application 越來越少使用jQuery 做為request的 library

但是學習jQuery的 ajax還是有好處的，因為現在大多的實作request的框架或是方法都是參考jQuery，所以基本上使用的Pattern還蠻相近的。

Fetch

在es6規範中，提供了Fetch作為request的方式。

Fetch 在使用時與 jQuery $.ajax 相近，所以在使用上也相對容易上手，不過兩者亦有不同概念之處。

這裡提供一個簡單的範例來取得遠端的資料，這裡與 $.ajax 不同點在於：

• fetch 會使用 ES6 的 Promise 作回應
• 需使用 then 作為告知fetch進行下一步動作
• 需要使用 catch 作為錯誤回應 (404, 500…)
• 回傳的為 ReadableStream 物件，需要使用不同資料類型(json,blob)使用對應方法，才能正確取得資料物件。

Fetch 請求

fetch後方會接 then()，這是 Promise 的特性，資料取得後可在 then 裡面接收，回傳的資料則會傳到下一個then()，詳細的使用方法可以參考MDN．Fetch目前使用上會一些缺點:

1. 對400，500都當做成功的請求，需要另外做處理
2. 預設是沒有帶cookie
3. 不支援timeout handle
4. 不支援監測請求的進度
5. 較早的瀏覽器並不支援(IE11以下不支援)

Axios

我是在使用Vue.js時接觸到Axios的，Vue.js的作者Evan You 建議使用axios作為request的工具，使用axios的方式相當簡單，把axios引入就好了。

axios get用法

Axios 有下列幾個優點:

1. 簡單易用，使用方法類似於jQuery
2. 支持Promise API
3. 可以在node.js中使用
4. 支援防CSRF
5. 提供併發請求
6. 相當輕量，約13kb

參考

1. jQuery ajax, Axios, Fetch區別之我見
2. 從ajax到fetch、axios
3. axios的基本使用
4. 使用 XMLHttpRequest
5. Retiring vue-resource
6. axios github
7. fetch