您好,登錄后才能下訂單哦!
在前端快速發(fā)展地過程中,為了契合更好的設(shè)計(jì)模式,產(chǎn)生了 fetch 框架,此文將簡(jiǎn)要介紹下 fetch 的基本使用。
在 AJAX 時(shí)代,進(jìn)行請(qǐng)求 API 等網(wǎng)絡(luò)請(qǐng)求都是通過 XMLHttpRequest 或者封裝后的框架進(jìn)行網(wǎng)絡(luò)請(qǐng)求。
現(xiàn)在產(chǎn)生的 fetch 框架簡(jiǎn)直就是為了提供更加強(qiáng)大、高效的網(wǎng)絡(luò)請(qǐng)求而生,雖然在目前會(huì)有一點(diǎn)瀏覽器兼容的問題,但是當(dāng)我們進(jìn)行 Hybrid App 開發(fā)的時(shí)候,如我之前介紹的Ionic 和React Native,都可以使用 fetch 進(jìn)行完美的網(wǎng)絡(luò)請(qǐng)求。
fetch 初體驗(yàn)
在 Chrome 瀏覽器中已經(jīng)全局支持了 fetch 函數(shù),打開調(diào)試工具,在 Console 中可以進(jìn)行初體驗(yàn)。先不考慮跨域請(qǐng)求的使用方法,我們先請(qǐng)求同域的資源,如在我的博客頁面中,打開 Console 進(jìn)行如下請(qǐng)求。
fetch("http://blog.parryqiu.com").then(function(response){console.log(response)})
返回的數(shù)據(jù):
這樣就很快速地完成了一次網(wǎng)絡(luò)請(qǐng)求,我們發(fā)現(xiàn)返回的數(shù)據(jù)也比之前的 XMLHttpRequest 豐富、易用的多。
關(guān)于 fetch 標(biāo)準(zhǔn)概覽
雖然 fetch 還不是作為一個(gè)穩(wěn)定的標(biāo)準(zhǔn)發(fā)布,但是在其一直迭代更新的 標(biāo)準(zhǔn)描述 中,我們發(fā)現(xiàn)已經(jīng)包含了很多的好東西。
fetch 支持了大部分常用的 HTTP 的請(qǐng)求以及和 HTTP 標(biāo)準(zhǔn)的兼容,如 HTTP Method,HTTP Headers,Request,Response。
fetch 的使用
fetch的入口函數(shù)定義在node_modules/whatwg-fetch.js文件中,如下
self.fetch = function (input, init) { return new Promise(function (resolve, reject) { var request = new Request(input, init) var xhr = new XMLHttpRequest() xhr.onload = function () { var options = { status: xhr.status, statusText: xhr.statusText, headers: parseHeaders(xhr.getAllResponseHeaders() || '') } options.url = 'responseURL' in xhr ? xhr.responseURL : options.headers.get('X-Request-URL') var body = 'response' in xhr ? xhr.response : xhr.responseText resolve(new Response(body, options)) } xhr.onerror = function () { reject(new TypeError('Network request failed')) } xhr.ontimeout = function () { reject(new TypeError('Network request failed888888888888')) } xhr.open(request.method, request.url, true) if (request.credentials === 'include') { xhr.withCredentials = true } if ('responseType' in xhr && support.blob) { xhr.responseType = 'blob' } request.headers.forEach(function (value, name) { xhr.setRequestHeader(name, value) }) xhr.send(typeof request._bodyInit === 'undefined' ? null : request._bodyInit) }) }
該函數(shù)在Network/fetch.js中被導(dǎo)出,最終在initializeCore.js中被注冊(cè)為global的屬性變?yōu)槿趾瘮?shù)。fetch返回的是一個(gè)Promise。
跟隨方法走向,依次調(diào)用的是XMLHttpRequest.js的send -> RCTNetworking.ios.js的sendRequest -> 最終調(diào)到原生端RCTNetworking.mm的sendRequest方法。
相關(guān)問題點(diǎn):
1、為何fetch函數(shù)無法設(shè)置timeout?
為了設(shè)置fetch的timeout,我會(huì)如下定義一個(gè)函數(shù)
_timeout_fetch(fetch_promise, timeout = 15000) { let timeout_promise = new Promise(function (resolve, reject) { setTimeout(() => { reject('timeout promise'); }, timeout) }); return Promise.race([ fetch_promise, timeout_promise ]); }
然后如下調(diào)用
this._timeout_fetch( fetch(url, requestParams) .then(response => response.json()) .then(responseData => { resolve(responseData); }) .catch(error => { reject(error); }) )
先定義一個(gè)Promise,其在超時(shí)時(shí)間結(jié)束后reject。將這個(gè)Promise和fetch合并到Promise.race中,則一旦這兩個(gè)請(qǐng)求誰先執(zhí)行,另外一個(gè)會(huì)被舍棄。這樣完成超時(shí)時(shí)間的設(shè)置。
但是查看源碼發(fā)現(xiàn)oc中是有超時(shí)時(shí)間設(shè)置這個(gè)選項(xiàng)的,且js和oc通信時(shí)也傳了這個(gè)參數(shù),問題是出在入口函數(shù)fetch處,只需要在上面fetch方法中添加上如下
xhr.timeout = init.timeout || 0;
就可以在請(qǐng)求參數(shù)中設(shè)置超時(shí)時(shí)間了,如
let requestParams = { method: method, header: { "Content-Type": "application/json;charset=UTF-8", }, timeout: 1000 };
2、fetch函數(shù)為何無法cancel?
fetch在原生端是NSURLSessionDataTask發(fā)的請(qǐng)求,這個(gè)是可取消的。在js端的XMLHttpRequest.js中也發(fā)現(xiàn)了abort方法,調(diào)用能夠取消當(dāng)前網(wǎng)絡(luò)請(qǐng)求。問題出在了fetch的接口函數(shù)。
首先,要想請(qǐng)求能夠取消,得拿到當(dāng)前請(qǐng)求對(duì)應(yīng)的requestId。請(qǐng)求的執(zhí)行順序是js端發(fā)起 -> OC生成Request,得到requestId,利用NSURLSessionDataTask發(fā)起請(qǐng)求 -> 將requestId通過回調(diào)的形式傳回給js端,js若想取消該請(qǐng)求,執(zhí)行abort方法即可。
要想fetch函數(shù)能夠執(zhí)行cancel,只需該方法將XMLHttpRequest對(duì)象返回即可。但是那樣,就不再是一個(gè)Promise了。
也可以將cancel方法綁定到返回的Promise對(duì)象上,修改方法如下
self.fetch = function (input, init) { var xhr = new XMLHttpRequest() let p = new Promise(function (resolve, reject) { var request = new Request(input, init) // xhr的各種設(shè)置,回調(diào)等 }) p.cancel = () => { xhr.abort() } return p; }
如此,調(diào)用的時(shí)候就比較惡習(xí)了,要如下
let promise = fetch(url); promise.then(res => { }).then(res => { }).catch(err => { }) promise.cancel() // 取消該網(wǎng)絡(luò)請(qǐng)求
不能fecth().then().then()的模式調(diào)用,因?yàn)檫@樣會(huì)導(dǎo)致返回的那個(gè)Promise不再是上面綁定了cancel的那個(gè)Promise。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。