歡迎大家前往騰訊云+社區，獲取更多騰訊海量技術實踐干貨哦~

本文由前端林子發表于云+社區專欄

隨著前端技術的發展，請求服務器數據的方法早已不局限于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 規范。如有問題，歡迎指正。

相關閱讀
【每日課程推薦】機器學習實戰！快速入門在線廣告業務及CTR相應知識

此文已由作者授權騰訊云+社區發布，更多原文請點擊

搜索關注公眾號「云加社區」，第一時間獲取技術干貨，關注后回復1024 送你一份技術課程大禮包！

海量技術實踐經驗，盡在云加社區！

總結

以上是生活随笔為你收集整理的只知道ajax？你已经out了的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。