成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

只知道ajax？你已經(jīng)out了

Steven / 2915人閱讀

摘要：所以本文將介紹兩個(gè)目前常用的獲取服務(wù)器數(shù)據(jù)的庫(kù)和。隨著作者尤雨溪發(fā)布消息，不再繼續(xù)維護(hù)并推薦大家使用開(kāi)始，進(jìn)入了很多人的目光。脫離了，是基于設(shè)計(jì)。如果要詳細(xì)了解的應(yīng)用，推薦閱讀教程和規(guī)范。

歡迎大家前往騰訊云+社區(qū)，獲取更多騰訊海量技術(shù)實(shí)踐干貨哦~

本文由前端林子發(fā)表于云+社區(qū)專欄

隨著前端技術(shù)的發(fā)展，請(qǐng)求服務(wù)器數(shù)據(jù)的方法早已不局限于ajax、jQuery的ajax方法。各種js庫(kù)已如雨后春筍一般，蓬勃發(fā)展，本文主要想介紹其中的axios和fetch。

0.引入

ajax（Asynchronous JavaScript and XML--異步JavaScript 和 XML），是一種客戶端向服務(wù)器請(qǐng)求數(shù)據(jù)的方式，并且不需要去刷新整個(gè)頁(yè)面；它依賴的是XMLHttpRequest對(duì)象。在我之前的文章中，介紹過(guò)ajax的創(chuàng)建過(guò)程，可以移步這次，我們聊聊ajax的創(chuàng)建過(guò)程。

當(dāng)然項(xiàng)目中我們一般沒(méi)有直接使用原生的ajax，而是使用javascript的各種庫(kù)，例如jQuery。jQuery對(duì)原生的XHR對(duì)象進(jìn)行了封裝，還增添了對(duì)JSONP的支持，且經(jīng)過(guò)多年維護(hù)，各種文檔資料非常豐富，非常適合學(xué)習(xí)和上手。不過(guò)隨著前端技術(shù)的快速發(fā)展，react、vue框架的興起，XHR對(duì)象都有了替代的方案（fetch）。另外如果為了要使用$.ajax方法，就導(dǎo)入整個(gè)jQuery這個(gè)大而全的庫(kù)，也未免顯得臃腫了些。所以本文將介紹兩個(gè)目前常用的獲取服務(wù)器數(shù)據(jù)的js庫(kù)：axios和fetch。

1.axios

是一個(gè)基于 Promise 的 HTTP 庫(kù)，可以用在瀏覽器和 node.js 中。

隨著 vuejs 作者尤雨溪發(fā)布消息，不再繼續(xù)維護(hù)vue-resource,并推薦大家使用 axios 開(kāi)始，axios 進(jìn)入了很多人的目光。axios本質(zhì)也是對(duì)原生的XHR的封裝，不過(guò)它是Promise 的實(shí)現(xiàn)版本，符合最新的ES規(guī)范，axios的幾條特性：

(1)從瀏覽器中創(chuàng)建XHR；

(2)從node.js創(chuàng)建http請(qǐng)求；

(3)支持Promise API；

(4)客戶端支持防御CSRF

(5)提供了一些并發(fā)請(qǐng)求的接口

使用npm安裝：

 npm install axios

示例--執(zhí)行GET請(qǐng)求：

//axios
axios.get("/user", {
    params: {
        ID: 12345
    }
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

axios的優(yōu)點(diǎn)：體積較小、使用簡(jiǎn)單、還可以執(zhí)行多個(gè)并發(fā)請(qǐng)求，并且可以直接得到返回結(jié)果，不會(huì)像fetch需要自己去轉(zhuǎn)換，個(gè)人還是比較喜歡使用axios。

2.fetch

fetch API脫離了XHR，是基于Promise設(shè)計(jì)。舊瀏覽器不支持Promise，需要使用polyfill es6-promise。

2.1 使用

使用npm安裝：

npm install whatwg-fetch --save

示例--執(zhí)行GET請(qǐng)求：

//use "whatwg-fetch"
import "whatwg-fetch"

var result = fetch(url, {
    credentials: "include",//跨域請(qǐng)求帶上cookie 
    headers: { "Accept": "application/json, text/plain, */*" }//設(shè)置http請(qǐng)求的頭部信息 
}).then(res => {
    return res.text() //將請(qǐng)求來(lái)的數(shù)據(jù)轉(zhuǎn)化成 文本形式 
    // return res.json() //將數(shù)據(jù)轉(zhuǎn)換成 json格式
}).then(text => {
    console.log(text)
}).catch(e => {
    throw (e)
})

可以在這個(gè)代碼的基礎(chǔ)上，增加一些操作，比如說(shuō)在對(duì)請(qǐng)求數(shù)據(jù)處理前，先檢查下返回結(jié)果的狀態(tài)。對(duì)狀態(tài)非200的結(jié)果，增加對(duì)應(yīng)狀態(tài)碼的錯(cuò)誤提示；在得到請(qǐng)求數(shù)據(jù)后，轉(zhuǎn)換成需要的文本格式，或者json格式；另外，還可以對(duì)轉(zhuǎn)換后的數(shù)據(jù)進(jìn)行進(jìn)一步的處理，比如請(qǐng)求的數(shù)據(jù)返回的是下劃線類型的數(shù)據(jù)，可以處理成駝峰形式。

2.2 fetch的優(yōu)點(diǎn)及需要注意的地方

為什么要使用fetch呢？直接使用jQuery和axios也能滿足我們的開(kāi)發(fā)需要?？戳诵┪恼?，提及到使用fetch的好處：

  • 脫離的XHR，是ES規(guī)范里新的實(shí)現(xiàn)方式，支持async/await；
  • 更加底層，提供了豐富的API(request，response)；
  • 符合關(guān)注分離，沒(méi)有將輸入、輸出和用事件來(lái)跟蹤的狀態(tài)混雜在一個(gè)對(duì)象里；
  • 更好更方便的寫法；

需要注意的是：

  • 兼容性；
  • 當(dāng)服務(wù)器返回400、500等錯(cuò)誤碼時(shí)并不會(huì)reject，只有網(wǎng)絡(luò)錯(cuò)誤等導(dǎo)致請(qǐng)求不能完成時(shí)，fetch才會(huì)被reject；
  • fetch不支持abort，不支持超時(shí)控制，使用setTimeout及Promise.reject的實(shí)現(xiàn)的超時(shí)控制，并不能阻止請(qǐng)求過(guò)程繼續(xù)在后臺(tái)運(yùn)行，造成了流量的浪費(fèi)；
  • fetch沒(méi)有辦法原生監(jiān)測(cè)請(qǐng)求的進(jìn)度，而XHR可以；
  • fetch跨域請(qǐng)求時(shí)，默認(rèn)不會(huì)帶cookie，如果需要帶cookie，則要指定:credentials:’include’，例如：
var result = fetch(url, {
    credentials: "include",
});

3.小結(jié)

本文簡(jiǎn)單地分別介紹了axios和fetch的使用方法和特點(diǎn)。如果要詳細(xì)了解fetch的應(yīng)用，推薦閱讀 MDN Fetch 教程和WHATWG Fetch 規(guī)范。如有問(wèn)題，歡迎指正。

相關(guān)閱讀
【每日課程推薦】機(jī)器學(xué)習(xí)實(shí)戰(zhàn)！快速入門在線廣告業(yè)務(wù)及CTR相應(yīng)知識(shí)

此文已由作者授權(quán)騰訊云+社區(qū)發(fā)布，更多原文請(qǐng)點(diǎn)擊

搜索關(guān)注公眾號(hào)「云加社區(qū)」，第一時(shí)間獲取技術(shù)干貨，關(guān)注后回復(fù)1024 送你一份技術(shù)課程大禮包！

海量技術(shù)實(shí)踐經(jīng)驗(yàn)，盡在云加社區(qū)！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1524.html

相關(guān)文章

  • Vue動(dòng)態(tài)加載異步組件

    摘要：目前采用動(dòng)態(tài)加載異步組件的方式來(lái)實(shí)現(xiàn)小組件之間的通信。內(nèi)容使用過(guò)的都應(yīng)該知道的動(dòng)態(tài)加載組件通過(guò)來(lái)綁定需要加載的組件。總結(jié)本篇主要借助的動(dòng)態(tài)組件和打包單文件來(lái)實(shí)現(xiàn)動(dòng)態(tài)加載異步組件，通過(guò)的事件總線掛載在上來(lái)實(shí)現(xiàn)平級(jí)組件之間的通信。 背景： 目前我們項(xiàng)目都是按組件劃分的，然后各個(gè)組件之間封裝成產(chǎn)品。目前都是采用iframe直接嵌套頁(yè)面。項(xiàng)目中我們還是會(huì)碰到一些通用的組件跟業(yè)務(wù)之間有通信，這種...

    awesome23 評(píng)論0 收藏0

  • 設(shè)計(jì)無(wú)限滾動(dòng)下拉加載，實(shí)踐高性能頁(yè)面真諦

    摘要：論壇上有過(guò)這么一篇熱門文章，它從角度分析了無(wú)限滾動(dòng)加載的設(shè)計(jì)實(shí)踐。無(wú)限滾動(dòng)加載背后的技術(shù)挑戰(zhàn)其實(shí)比想象中要多不少。整體思路和方案設(shè)計(jì)我們要實(shí)現(xiàn)的頁(yè)面樣例如圖，它能夠做到無(wú)限下拉加載內(nèi)容。 UX Planet論壇上有過(guò)這么一篇熱門文章: Infinite Scrolling Best Practices，它從UX角度分析了無(wú)限滾動(dòng)加載的設(shè)計(jì)實(shí)踐。 無(wú)限滾動(dòng)加載在互聯(lián)網(wǎng)上到處都有應(yīng)用：豆瓣...

    Hanks10100 評(píng)論0 收藏0

  • 設(shè)計(jì)無(wú)限滾動(dòng)下拉加載，實(shí)踐高性能頁(yè)面真諦

    摘要：論壇上有過(guò)這么一篇熱門文章，它從角度分析了無(wú)限滾動(dòng)加載的設(shè)計(jì)實(shí)踐。無(wú)限滾動(dòng)加載背后的技術(shù)挑戰(zhàn)其實(shí)比想象中要多不少。整體思路和方案設(shè)計(jì)我們要實(shí)現(xiàn)的頁(yè)面樣例如圖，它能夠做到無(wú)限下拉加載內(nèi)容。 UX Planet論壇上有過(guò)這么一篇熱門文章: Infinite Scrolling Best Practices，它從UX角度分析了無(wú)限滾動(dòng)加載的設(shè)計(jì)實(shí)踐。 無(wú)限滾動(dòng)加載在互聯(lián)網(wǎng)上到處都有應(yīng)用：豆瓣...

    novo 評(píng)論0 收藏0

  • 關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(一) ----- XMLHttpRequest

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

    i_garfileo 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<