网络请求获取数据

太过爱你忘了你带给我的痛 2022-09-26 13:00 167阅读 0赞

通过HTTP或者HTTPS协议与网络侧服务器交换数据是移动应用中常见的通信方式。 node-fetch是RN推荐的请求方式。   
React Native框架在初始化项目时, 引入了node-fetch包 (因为npm3把依赖全部摊平了,node-fetch就在node\_modules目录下)

下面就是项目中引入的node-fetch的源码:

![20160921112355770][]

# 联网 #

联网分为发送请求和接受响应两步。分开来分析下。

## 发送请求 ##

发送http/https gong细分一下共有6个步骤   
1. 确定并准备请求地址与协议   
2. 确定请求中的HTTP方法   
3. 准备请求中药传输的消息头   
4. 准备身份验证信息   
5. 确定是否需要携带消息体/参数   
6. 发出消息

我们以[查询号码归属地][Link 1]这个地址演示下。   
![20160921112427696][]

### 1. 确定并准备请求地址与协议 ###

请求地址以http/https 开头，为了便于修改地址，通常将地址放在一个变量中。IOS9以上默认无法访问http请求, 具体参考后面的注意事项。

### 2. 确定请求中的HTTP方法 ###

根据HTTP协议的设计初衷，不同的方法对资源有不同的操作方式：   
\+ PUT ：增   
\+ DELETE ：删   
\+ POST：改   
\+ GET：查

最常用的是GET和POST（实际上GET和POST都能办到增删改查）   
如果不指定，默认的方法为GET，当前使用的api接口只支持get请求

<code class="hljs ocaml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">let map={
 method:'GET'
 };</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>

### 3. 准备请求中药传输的消息头 ###

接下来需要设置请求中需要传输的消息头。消息头分为两种，其中一种是协议规定的标准消息头；另一种是用户自定义的消息头。

RN支持gzip/deflate格式编码,不需要对此进行设置。RN收到gzip/deflate格式编码会自动转换为普通格式交给开发者。   
消息头是不区分大小写的，如果有大写字母，传输的时候回自动转换为小写。   
key信息请自己注册。

### 4. 准备身份验证信息 ###

某些Http请求需要加入身份验证信息，比如上面的apikey，有些时候在需要进行身份验证的时候需要两次HTTP请求来完成。

### 5. 确定是否需要携带消息体/参数 ###

如果需要带消息体，可以通过body配置,GET请求不需要。

<code class="hljs javascript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">map.body=JSON.stringify({
 fistParam:'yourValue',
 secondParam:'yourValue'
 });</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>

POST请求参数是放在消息体中,而GET直接拼装在请求地址后面通过?间隔。

### 6. 发出消息 ###

将上述5步联合起来就可以得到发送HTTP或HTTPS的请求片段。如下：

<code class="hljs lasso has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> componentDidMount() {
 let url=`http://apis.baidu.com/showapi_open_bus/mobile/find`;
 let params='num=13126939916';
 let requestURL=url+"?"+params;
 let map={
 method:'GET'
 };
 let privateHeaders={
 // 'Private-Header':'values1', //自定义消息头
 // 'Content-Type':"text/plain", //设置消息体格式,GET请求不需要设置
 // 'User-Agent':'testAgent',// 如果不设置默认为okhttp/2.5.0
 'apikey':'9dc7ab2f8993b0b215ad8c550e1f4ebe'
 };
 map.headers=privateHeaders; //加上自定义消息头
 map.follow=20;//设置允许最大的重定向次数,0不允许重定向
 map.timeout=0;//设置超时时间,0代表没有
 map.size=0;//请求回应中消息体最大允许的长度,0没有限制
 //map.body='this is body';
 fetch(requestURL,map)
 .then(
 (result)=>{
 //接受回应消息处理.
 console.log(result);
 }
 )
 }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li></ul>

### 注意事项 解决IOS9以上默认不能访问http请求 ###

> WWDC 15 提出的 ATS (App Transport Security) 是 Apple 在推进网络通讯安全的一个重要方式。在 iOS 9 和 OS X 10.11 中，默认情况下非 HTTPS 的网络访问是被禁止的。当然，因为这样的推进影响面非常广，作为缓冲，我们可以在 Info.plist 中添加 NSAppTransportSecurity 字典并且将NSAllowsArbitraryLoads 设置为 YES 来禁用 ATS。

找到info.plist文件添加NSAllowsArbitraryLoads

![20160921112604087][]

![20160921112622603][]

或者直接在xcode中打开ios项目进行配置。

![20160921112648664][]

## 接收响应 ##

当请求成功,会返回一个存储有回应数据的对象

![20160921112753979][]

1.  type 字符串类型，记录请求类型
2.  url 请求地址
3.  status 响应码 200代表成功
4.  ok 布尔类型，记录是否成功。

### fetch方法 ###

fetch 返回的 then 方法有一个 response 参数，它是一个 Response 实例。 Response 有如下方法:

*  clone() - 复制一份response
 *  error() - 返回一个与网络相关的错误
 *  redirect() - 返回了一个可以重定向至某URL的response.
 *  arrayBuffer() - 返回一个带有ArrayBuffer的Promise.
 *  blob() - 返回一个带有Blob的Promise.
 *  formData() - 返回一个带有FormData的Promise.
 *  json() - 返回一个带有JSON格式对象的Promise.
 *  text() - 返回一个带有文本的Promise.

下面就是完整的返回json的例子：

# 完整的例子 #

<code class="hljs coffeescript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> componentDidMount() {
 let url=`http://apis.baidu.com/showapi_open_bus/mobile/find`;
 let params='num=13126939916';
 let requestURL=url+"?"+params;
 let map={
 method:'GET'
 };
 let privateHeaders={
 'apikey':'9dc7ab2f8993b0b215ad8c550e1f4ebe'
 };
 map.headers=privateHeaders; //加上自定义消息头
 map.follow=20;//设置允许最大的重定向次数,0不允许重定向
 map.timeout=0;//设置超时时间,0代表没有
 map.size=0;//请求回应中消息体最大允许的长度,0没有限制
 fetch(requestURL,map)
 .then((result)=>result.json()) //.json()
 .catch((error)=>{
 console.log(error);
 })
 .then((responseData)=>{
 console.log(responseData);
 });
 }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li></ul>

当然也可以用ES2017的语法:

<code class="hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> async netWork() {
 let url=`http://apis.baidu.com/showapi_open_bus/mobile/find`;
 let params='num=13126939916';
 let requestURL=url+"?"+params;
 try {
 let response = await fetch(requestURL,{
 headers:{
 'apikey':'9dc7ab2f8993b0b215ad8c550e1f4ebe'
 }
 });
 let responseJson = await response.json();
 console.log(responseJson);
 return responseJson;
 } catch (error) {
 console.error(error);
 }
 }</code>

[20160921112355770]: /images/20220717/4434781360874baa9e62f4d28d6fc11d.png
[Link 1]: http://apistore.baidu.com/apiworks/servicedetail/709.html
[20160921112427696]: /images/20220717/d54dde87869d4047b27cbb69f554c91f.png
[20160921112604087]: /images/20220717/6f066682d66747d596e131c820a66c4e.png
[20160921112622603]: /images/20220717/19493584f5fc4407aeafa7777fe4d955.png
[20160921112648664]: /images/20220717/6d118e0509654c8b9533154cdab427ba.png
[20160921112753979]: /images/20220717/d55e3647f09a4ebaacef7310e6d5bdcc.png