从零学React Native之14 网络请求

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

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

联网

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

发送请求

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

我们以查询号码归属地这个地址演示下。

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

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

let url=`http://apis.baidu.com/showapi_open_bus/mobile/find`;

2. 确定请求中的HTTP方法

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

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

let map={
     method:'GET'
};

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

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

let privateHeaders={
     'Private-Header':'values1', //自定义消息头
     //'Content-Type':"text/plain", //设置消息体格式,GET请求不需要设置
     //'User-Agent':'testAgent',// 如果不设置默认为okhttp/2.5.0
     'apikey':'9dc7ab2f8993b0b215ad8c550e1f4ebe' //百度账号的apikey
};
map.headers=privateHeaders; //加上自定义消息