react-native——fetch

Posted 2023-04-19

参考技术A fetch的入口函数定义在node_modules/whatwg-fetch.js文件中，如下

该函数在Network/fetch.js中被导出，最终在initializeCore.js中被注册为global的属性变为全局函数。fetch返回的是一个Promise。
跟随方法走向，依次调用的是XMLHttpRequest.js的send -> RCTNetworking.ios.js的sendRequest -> 最终调到原生端RCTNetworking.mm的sendRequest方法。

相关问题点：
1、为何fetch函数无法设置timeout？
为了设置fetch的timeout，我会如下定义一个函数

然后如下调用

先定义一个Promise，其在超时时间结束后reject。将这个Promise和fetch合并到Promise.race中，则一旦这两个请求谁先执行，另外一个会被舍弃。这样完成超时时间的设置。
但是查看源码发现oc中是有超时时间设置这个选项的，且js和oc通信时也传了这个参数，问题是出在入口函数fetch处，只需要在上面fetch方法中添加上如下

就可以在请求参数中设置超时时间了，如

2、fetch函数为何无法cancel？
fetch在原生端是NSURLSessionDataTask发的请求，这个是可取消的。在js端的XMLHttpRequest.js中也发现了abort方法，调用能够取消当前网络请求。问题出在了fetch的接口函数。
首先，要想请求能够取消，得拿到当前请求对应的requestId。请求的执行顺序是js端发起 -> OC生成Request，得到requestId，利用NSURLSessionDataTask发起请求 -> 将requestId通过回调的形式传回给js端，js若想取消该请求，执行abort方法即可。
要想fetch函数能够执行cancel，只需该方法将XMLHttpRequest对象返回即可。但是那样，就不再是一个Promise了。
也可以将cancel方法绑定到返回的Promise对象上，修改方法如下

如此，调用的时候就比较恶习了，要如下

不能fecth().then().then()的模式调用，因为这样会导致返回的那个Promise不再是上面绑定了cancel的那个Promise。

如何显示从 fetch() 方法返回的图像 - react-native

【中文标题】如何显示从 fetch() 方法返回的图像 - react-native

【英文标题】：How to display image returned from fetch() method - react-native

【发布时间】：2020-05-20 04:13:54

【问题描述】：

我有以下代码从 API 中检索图像

await fetch('https://example.com/api/user/fileaccess', 
    method: 'POST',
    headers: 
      Accept: '*',
      'Content-Type': 'application/json',
      'token':'xxxxxxxxxxxxxxxxxxxxxxxx'
    ,
    body:  JSON.stringify("applicantid": xxxx, "user_secret": "xxxxxxxxxxx","fileid":xxxxx),
  ).then((response) => 
    console.log(response);
  ); 

请求已完成，我已登录控制台。

"_bodyBlob": "_data": "__collector": [对象], "blobId": “xxxxx-xxxx-xxx-xxxx-xxxxx”，“偏移”：0，“大小”：953328， “_bodyInit”：“_data”：“__collector”：[对象]，“blobId”： “xxxxx-xxxx-xxxx-xxxx-xxxxx”，“偏移”：0，“大小”：953328， “标题”：“地图”：“缓存控制”：“max-age = 2592000”，“连接”： “Keep-Alive”、“content-type”：“image/jpeg”、“date”：“2020 年 2 月 4 日星期二 格林威治标准时间 10:34:14", "过期": "2020 年 3 月 5 日星期四 10:34:14 格林威治标准时间", “保持活动”：“超时=5，最大值=100”，“编译指示”：“公共”，“服务器”： “Apache”，“传输编码”：“分块”，“ok”：true，“status”：200， “statusText”：未定义，“类型”：“默认”，“url”： "https://example.com/api/user/fileaccess"

我的问题是，如何在我的应用中将此数据显示为图像？是否可以将此数据转换为 base64？

【问题讨论】：

那个网址有你的图片吗？

是的，我可以在邮递员中看到它

【参考方案1】：

如果这是图片网址，您可以按照以下方式进行操作 将图像存储在您的状态

this.setState(image:res.url)

然后<Image source=uri:this.state.image/>

【参考方案2】：

您需要先将其提取到 json 或 text 或其他一些数据中，然后才能对响应进行任何操作。

根据Mozilla docs，设置一个基本的获取请求非常简单。看看下面的代码：

fetch('http://example.com/movies.json')
  .then((response) => 
    return response.json();
  )
  .then((myJson) => 
    console.log(myJson);
  );

所以，修改你的代码如下：

fetch('https://example.com/api/user/fileaccess', 
    method: 'POST',
    headers: 
      Accept: '*',
      'Content-Type': 'application/json',
      'token':'xxxxxxxxxxxxxxxxxxxxxxxx'
    ,
    body:  JSON.stringify("applicantid": xxxx, "user_secret": "xxxxxxxxxxx","fileid":xxxxx),
  )
.then(response => response.json())
.then((result) => 
     console.log("Your intended result is: " , result)
); 

添加response.json() 只是假设服务器正在返回 JSON 数据。 如果没有，您也可以根据您的服务器实现尝试以下方法。

数组缓冲区() 斑点（） json() 文本（） 表单数据（）