fetch api

fetch API是當(dāng)下較新的前后端交互api在比較高版本的歷覽器得到了支持例如谷歌瀏覽器中。

fetch提供了 fetch/Request/Header等方法用于ajax請(qǐng)求

1:header:用于設(shè)置ajax請(qǐng)求的請(qǐng)求頭。

var headers=new Headers({

? ? "Content-Type":"text/html"

......

})

同時(shí)也可以用append方法往headers中增加元素

2:Request方法用于設(shè)置

var request=new Request(URL,{

? ? 配置信息

})

配置信息的種類

? ? 1:headers

? ? 2:Method

.....

3:fetch方法fetch的靈魂用于具體的請(qǐng)求

? ? fetch方法返回一個(gè)promise對(duì)象

fetch( request ).then(function(data){

? ? console.log(data.json)

})

Fetch API從提出到實(shí)現(xiàn)一直存在著爭(zhēng)議,由于一直現(xiàn)存的歷史原因(例如HTML5的拖拽API被認(rèn)為太過(guò)稀疏平常,Web Components標(biāo)準(zhǔn)被指意義不大)。 因此重新設(shè)計(jì)一個(gè)新的API來(lái)替代久經(jīng)沙場(chǎng)歷練的XMLHttpRequest就變得阻力重重。

其中一種反對(duì)觀點(diǎn)認(rèn)為,Promises缺少了一些重要的XMLHttpRequest的使用場(chǎng)景。例如, 使用標(biāo)準(zhǔn)的ES6 Promise你無(wú)法收集進(jìn)入信息或中斷請(qǐng)求。而Fetch的狂熱開(kāi)發(fā)者更是試圖提供Promise API的擴(kuò)展用于取消一個(gè)Promise。 這個(gè)提議有點(diǎn)自挖墻角的意思,因?yàn)閷⑦@將讓Promise變得不符合標(biāo)準(zhǔn)。但這個(gè)提議或許會(huì)導(dǎo)致未來(lái)出現(xiàn)一個(gè)可取消的Promise標(biāo)準(zhǔn)。 但另一方面,使用XMLHttpRequest你可以模擬進(jìn)度(監(jiān)聽(tīng)progress事件),也可以取消請(qǐng)求(使用abort()方法)。 但是,如果有必要你也可以使用Promise來(lái)包裹它。

另一種反對(duì)觀點(diǎn)認(rèn)為,Web平臺(tái)需要的是更多底層的API,而不是高層的API。對(duì)此的回答恰恰是, Fetch API足夠底層,因?yàn)?a target="_blank" rel="nofollow">當(dāng)前的WHATWG標(biāo)準(zhǔn)定義了XMLHttpRequest.send()方法其實(shí)等同于fetch的Requset對(duì)象。 Fetch中的Response.body實(shí)現(xiàn)了getReader()方法用于漸增的讀取原始字節(jié)流。 例如,如果照片列表過(guò)大而放不進(jìn)內(nèi)存的話,你可以使用下面的方法來(lái)處理:


Fetch API

目前Chrome 42+, Opera 29+, 和Firefox 39+都支持Fetch。微軟也考慮在未來(lái)的版本中支持Fetch。 諷刺的是,當(dāng)IE瀏覽器終于微響應(yīng)實(shí)現(xiàn)了progress事件的時(shí)候,XMLHttpRequest也走到了盡頭。 目前,如果你需要支持IE的話,你需要使用一個(gè)polyfill庫(kù)。

總結(jié)

在本文中我們?yōu)槟憬榻B了Fetch API的整體概況以及它所能解決的問(wèn)題。在表層, 這個(gè)API看起來(lái)非常的簡(jiǎn)單,但它同時(shí)也與一些底層的API相關(guān)聯(lián),例如Streams, 這讓客戶端編程有點(diǎn)類似于系統(tǒng)編程。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • JavaScript 通過(guò)XMLHttpRequest(XHR)來(lái)執(zhí)行異步請(qǐng)求,這個(gè)方式已經(jīng)存在了很長(zhǎng)一段時(shí)間。雖...
    Bruce_zhuan閱讀 2,490評(píng)論 1 10
  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 134,836評(píng)論 18 139
  • 寫(xiě)在前面 fetch同XMLHttpRequest非常類似,都是用來(lái)做網(wǎng)絡(luò)請(qǐng)求。但是同復(fù)雜的XMLHttpRequ...
    LETSGOHEAT閱讀 5,160評(píng)論 0 6
  • Fetch API 一個(gè)隱藏最深的秘密就是AJAX的實(shí)現(xiàn)底層的XMLHttpRequest,這個(gè)方法本來(lái)并不是造出...
    uncle_charlie閱讀 1,410評(píng)論 0 5
  • fetch 是瀏覽器提供的一個(gè)新的 web API,它用來(lái)代替 Ajax(XMLHttpRequest),其提供了...
    唯泥Bernie閱讀 8,603評(píng)論 0 6