歡迎大家前往 "騰訊雲+社區" ，獲取更多騰訊海量技術實踐乾貨哦~ 本文由 "前端林子" 發表於 "雲+社區專欄" 隨著前端技術的發展，請求伺服器數據的方法早已不局限於ajax、jQuery的ajax方法。各種js庫已如雨後春筍一般，蓬勃發展，本文主要想介紹其中的axios和fetch。 0.引入 ...
歡迎大家前往騰訊雲+社區，獲取更多騰訊海量技術實踐乾貨哦~
隨著前端技術的發展，請求伺服器數據的方法早已不局限於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 送你一份技術課程大禮包！
海量技術實踐經驗，盡在雲加社區！
