只知道ajax？你已經out了

Steven 發布于2019-04-23 13:10 / 2906人閱讀

摘要：所以本文將介紹兩個目前常用的獲取服務器數據的庫和。隨著作者尤雨溪發布消息，不再繼續維護并推薦大家使用開始，進入了很多人的目光。脫離了，是基于設計。如果要詳細了解的應用，推薦閱讀教程和規范。

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

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

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

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

GPU云服務器云服務器百度一下你就知道了你知道你已經只知道

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1524.html

Vue動態加載異步組件

摘要：目前采用動態加載異步組件的方式來實現小組件之間的通信。內容使用過的都應該知道的動態加載組件通過來綁定需要加載的組件。總結本篇主要借助的動態組件和打包單文件來實現動態加載異步組件，通過的事件總線掛載在上來實現平級組件之間的通信。背景：目前我們項目都是按組件劃分的，然后各個組件之間封裝成產品。目前都是采用iframe直接嵌套頁面。項目中我們還是會碰到一些通用的組件跟業務之間有通信，這種...

awesome23 2019-08-26 13:22 評論0 收藏0
設計無限滾動下拉加載，實踐高性能頁面真諦

摘要：論壇上有過這么一篇熱門文章，它從角度分析了無限滾動加載的設計實踐。無限滾動加載背后的技術挑戰其實比想象中要多不少。整體思路和方案設計我們要實現的頁面樣例如圖，它能夠做到無限下拉加載內容。 UX Planet論壇上有過這么一篇熱門文章: Infinite Scrolling Best Practices，它從UX角度分析了無限滾動加載的設計實踐。無限滾動加載在互聯網上到處都有應用：豆瓣...

Hanks10100 2019-08-20 14:39 評論0 收藏0
設計無限滾動下拉加載，實踐高性能頁面真諦

摘要：論壇上有過這么一篇熱門文章，它從角度分析了無限滾動加載的設計實踐。無限滾動加載背后的技術挑戰其實比想象中要多不少。整體思路和方案設計我們要實現的頁面樣例如圖，它能夠做到無限下拉加載內容。 UX Planet論壇上有過這么一篇熱門文章: Infinite Scrolling Best Practices，它從UX角度分析了無限滾動加載的設計實踐。無限滾動加載在互聯網上到處都有應用：豆瓣...

novo 2019-08-01 16:25 評論0 收藏0
關于前端上傳文件全面基礎掃盲貼(一) ----- XMLHttpRequest

摘要：狀態表示對象的狀態狀態描述未初始化。表示成功，表示未找到，表示服務器內部錯誤等。前提是瀏覽器必須支持這個功能，而且服務器端必須同意這種跨域。事件傳輸成功完成。系列文章關于前端上傳文件全面基礎掃盲貼(零)關于前端上傳文件全面基礎掃盲貼(一) ----- XMLHttpRequest關于前端上傳文件全面基礎掃盲貼(二) ----- File關于前端上傳文件全面基礎掃盲貼(三) ----...

i_garfileo 2019-08-26 10:29 評論0 收藏0