只知道ajax？你已經out了

歡迎你們前往騰訊雲+社區，獲取更多騰訊海量技術實踐乾貨哦~

本文由 前端林子發表於 雲+社區專欄

隨着前端技術的發展，請求服務器數據的方法早已不侷限於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 送你一份技術課程大禮包！

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