只知道ajax？你已經out了
歡迎大家前往ofollow,noindex" target="_blank">騰訊雲+社群 ，獲取更多騰訊海量技術實踐乾貨哦~
隨著前端技術的發展，請求伺服器資料的方法早已不侷限於ajax、jQuery的ajax方法。各種js庫已如雨後春筍一般，蓬勃發展，本文主要想介紹其中的axios和fetch。
0.引入
ajax（Asynchronous JavaScript and XML--非同步JavaScript 和 XML），是一種客戶端向伺服器請求資料的方式，並且不需要去重新整理整個頁面；它依賴的是XMLHttpRequest物件。在我之前的文章中，介紹過ajax的建立過程，可以移步這次，我們聊聊ajax的建立過程 。
當然專案中我們一般沒有直接使用原生的ajax，而是使用javascript的各種庫，例如jQuery。jQuery對原生的XHR物件進行了封裝，還增添了對JSONP的支援，且經過多年維護，各種文件資料非常豐富，非常適合學習和上手。不過隨著前端技術的快速發展，react、vue框架的興起，XHR物件都有了替代的方案（fetch）。另外如果為了要使用$.ajax方法，就匯入整個jQuery這個大而全的庫，也未免顯得臃腫了些。所以本文將介紹兩個目前常用的獲取伺服器資料的js庫：axios和fetch。
1.axios
是一個基於 Promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。
隨著 vuejs 作者尤雨溪釋出訊息，不再繼續維護vue-resource,並推薦大家使用 axios 開始，axios 進入了很多人的目光。axios本質也是對原生的XHR的封裝，不過它是Promise 的實現版本，符合最新的ES規範，axios 的幾條特性：
(1)從瀏覽器中建立XHR；
(2)從node.js建立http請求；
(3)支援Promise API；
(4)客戶端支援防禦CSRF
(5)提供了一些併發請求的介面
使用npm安裝：
npm install axios
示例--執行GET請求：
//axios
axios.get('/user', {
params: {
ID: 12345
}
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
axios的優點：體積較小、使用簡單、還可以執行多個併發請求，並且可以直接得到返回結果，不會像fetch需要自己去轉換，個人還是比較喜歡使用axios。
2.fetch
fetch API脫離了XHR，是基於Promise設計。舊瀏覽器不支援Promise，需要使用polyfill es6-promise。
2.1 使用
使用npm安裝：
npm install whatwg-fetch --save
示例--執行GET請求：
//use 'whatwg-fetch'
import 'whatwg-fetch'
var result = fetch(url, {
credentials: 'include',//跨域請求帶上cookie
headers: { 'Accept': 'application/json, text/plain, */*' }//設定http請求的頭部資訊
}).then(res => {
return res.text() //將請求來的資料轉化成 文字形式
// return res.json() //將資料轉換成 json格式
}).then(text => {
console.log(text)
}).catch(e => {
throw (e)
})
可以在這個程式碼的基礎上，增加一些操作，比如說在對請求資料處理前，先檢查下返回結果的狀態。對狀態非200的結果，增加對應狀態碼的錯誤提示；在得到請求資料後，轉換成需要的文字格式，或者json格式；另外，還可以對轉換後的資料進行進一步的處理，比如請求的資料返回的是下劃線型別的資料，可以處理成駝峰形式。
2.2 fetch的優點及需要注意的地方
為什麼要使用fetch呢？直接使用jQuery和axios也能滿足我們的開發需要。看了些文章，提及到使用fetch的好處：
- 脫離的XHR，是ES規範裡新的實現方式，支援async/await；
- 更加底層，提供了豐富的API(request，response)；
- 符合關注分離，沒有將輸入、輸出和用事件來跟蹤的狀態混雜在一個物件裡；
- 更好更方便的寫法；
需要注意的是：
- 相容性；
- 當伺服器返回400、500等錯誤碼時並不會reject，只有網路錯誤等導致請求不能完成時，fetch才會被reject；
- fetch不支援abort，不支援超時控制，使用setTimeout及Promise.reject的實現的超時控制，並不能阻止請求過程繼續在後臺執行，造成了流量的浪費；
- fetch沒有辦法原生監測請求的進度，而XHR可以；
- fetch跨域請求時，預設不會帶cookie，如果需要帶cookie，則要指定:credentials:’include’，例如：
var result = fetch(url, {
credentials: 'include',
});
3.小結
本文簡單地分別介紹了axios和fetch的使用方法和特點。如果要詳細瞭解fetch的應用，推薦閱讀MDN Fetch 教程 和WHATWG Fetch 規範 。如有問題，歡迎指正。
此文已由作者授權騰訊雲+社群釋出，更多原文請點選
搜尋關注公眾號「雲加社群」，第一時間獲取技術乾貨，關注後回覆1024 送你一份技術課程大禮包！
海量技術實踐經驗，盡在雲加社群 ！