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)處理:
目前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)編程。