點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

react-native fetch的具體使用方法

來源：懂視網責編：小采時間：2020-11-27 22:26:33

react-native fetch的具體使用方法

react-native fetch的具體使用方法:在前端快速發(fā)展地過程中，為了契合更好的設計模式，產生了 fetch 框架，此文將簡要介紹下 fetch 的基本使用。在 AJAX 時代，進行請求 API 等網絡請求都是通過 XMLHttpRequest 或者封裝后的框架進行網絡請求。現(xiàn)在產生的 fetch 框架簡直就是為了提供

推薦度：

點擊下載本文 文檔為doc格式

導讀react-native fetch的具體使用方法:在前端快速發(fā)展地過程中，為了契合更好的設計模式，產生了 fetch 框架，此文將簡要介紹下 fetch 的基本使用。在 AJAX 時代，進行請求 API 等網絡請求都是通過 XMLHttpRequest 或者封裝后的框架進行網絡請求。現(xiàn)在產生的 fetch 框架簡直就是為了提供

在前端快速發(fā)展地過程中，為了契合更好的設計模式，產生了 fetch 框架，此文將簡要介紹下 fetch 的基本使用。

在 AJAX 時代，進行請求 API 等網絡請求都是通過 XMLHttpRequest 或者封裝后的框架進行網絡請求。

現(xiàn)在產生的 fetch 框架簡直就是為了提供更加強大、高效的網絡請求而生，雖然在目前會有一點瀏覽器兼容的問題，但是當我們進行 Hybrid App 開發(fā)的時候，如我之前介紹的Ionic 和React Native，都可以使用 fetch 進行完美的網絡請求。

fetch 初體驗

在 Chrome 瀏覽器中已經全局支持了 fetch 函數，打開調試工具，在 Console 中可以進行初體驗。先不考慮跨域請求的使用方法，我們先請求同域的資源，如在我的博客頁面中，打開 Console 進行如下請求。

fetch("http://blog.parryqiu.com").then(function(response){console.log(response)})

返回的數據：

這樣就很快速地完成了一次網絡請求，我們發(fā)現(xiàn)返回的數據也比之前的 XMLHttpRequest 豐富、易用的多。

關于 fetch 標準概覽

雖然 fetch 還不是作為一個穩(wěn)定的標準發(fā)布，但是在其一直迭代更新的標準描述中，我們發(fā)現(xiàn)已經包含了很多的好東西。

fetch 支持了大部分常用的 HTTP 的請求以及和 HTTP 標準的兼容，如 HTTP Method，HTTP Headers，Request，Response。

fetch 的使用

fetch的入口函數定義在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)
 })
 }

該函數在Network/fetch.js中被導出，最終在initializeCore.js中被注冊為global的屬性變?yōu)槿趾瘮怠etch返回的是一個Promise。

跟隨方法走向，依次調用的是XMLHttpRequest.js的send -> RCTNetworking.ios.js的sendRequest -> 最終調到原生端RCTNetworking.mm的sendRequest方法。

相關問題點：

1、為何fetch函數無法設置timeout？

為了設置fetch的timeout，我會如下定義一個函數

 _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
 ]);
 }

然后如下調用

 this._timeout_fetch(
 fetch(url, requestParams)
 .then(response => response.json())
 .then(responseData => {
 resolve(responseData);
 })
 .catch(error => {
 reject(error);
 })
 )

先定義一個Promise，其在超時時間結束后reject。將這個Promise和fetch合并到Promise.race中，則一旦這兩個請求誰先執(zhí)行，另外一個會被舍棄。這樣完成超時時間的設置。

但是查看源碼發(fā)現(xiàn)oc中是有超時時間設置這個選項的，且js和oc通信時也傳了這個參數，問題是出在入口函數fetch處，只需要在上面fetch方法中添加上如下

 xhr.timeout = init.timeout || 0;

就可以在請求參數中設置超時時間了，如

 let requestParams = {
 method: method,
 header: {
 "Content-Type": "application/json;charset=UTF-8",
 },
 timeout: 1000
 };

2、fetch函數為何無法cancel？

fetch在原生端是NSURLSessionDataTask發(fā)的請求，這個是可取消的。在js端的XMLHttpRequest.js中也發(fā)現(xiàn)了abort方法，調用能夠取消當前網絡請求。問題出在了fetch的接口函數。

首先，要想請求能夠取消，得拿到當前請求對應的requestId。請求的執(zhí)行順序是js端發(fā)起 -> OC生成Request，得到requestId，利用NSURLSessionDataTask發(fā)起請求 -> 將requestId通過回調的形式傳回給js端，js若想取消該請求，執(zhí)行abort方法即可。

要想fetch函數能夠執(zhí)行cancel，只需該方法將XMLHttpRequest對象返回即可。但是那樣，就不再是一個Promise了。
也可以將cancel方法綁定到返回的Promise對象上，修改方法如下

 self.fetch = function (input, init) {
 var xhr = new XMLHttpRequest()
 let p = new Promise(function (resolve, reject) {
 var request = new Request(input, init)
 // xhr的各種設置，回調等
 })
 p.cancel = () => {
 xhr.abort()
 }
 return p;
 }

如此，調用的時候就比較惡習了，要如下

 let promise = fetch(url);
 promise.then(res => {
 }).then(res => {
 }).catch(err => {
 })
 promise.cancel() // 取消該網絡請求

不能fecth().then().then()的模式調用，因為這樣會導致返回的那個Promise不再是上面綁定了cancel的那個Promise。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

react-native fetch的具體使用方法

推薦度：

點擊下載本文 文檔為doc格式

標簽：方法使用使用方法

熱門焦點

react-native fetch的具體使用方法

react-native fetch的具體使用方法

react-native fetch的具體使用方法

最新推薦

猜你喜歡

熱門推薦