前言
眼看很多公司都开始尝试使用ReactNative,达到跨平台开发，最近也写了很多文章，希望让更多想了解的同学快速上手ReactNative.
如果喜欢我的文章，可以关注我微博:袁峥Seemygo
ReactNative之网络请求
- 任何App都少不了从服务器获取数据，那就需要进行网络请求，那在RN中如何进行网络请求了。
fetch API
- RN网络请求
常用方法
fetch: 发送请求,默认Get请求
then : 传入一个回调函数，当上一次操作处理完,就会自动执行then的回调函数,并且自动把处理完的结果,作为参数传递给then的回调函数
response.json(): 把请求到的数据转换为json
catch : 在请求或者处理数据失败的时候,就会执行catch里的回调函数，捕获异常
GET请求
fetch(http://192.168.0.102:3000/home?name=xmg) // 发送GET请求
.then((response)=>response.json()) // 请求成功，把请求数据转换为 JSON
.then((json)=>{ // 获取JSON数据做事情
console.log(json)
})
.catch((error)=>{ // 请求失败或者处理JSON数据失败，调用
console.log(error)
})
GET请求封装
- 每次请求，都要自己拼接url和自己转JSON数据，比较麻烦.
- 自定义XMGRequest请求类
- 封装技巧：
- 直接使用class定义类，不需要继承谁
- GET方法，声明类方法就好，没必要创建对象去调用，用static声明
- 方法需要添加文档注释（/** + 回车），就有文档注释
- GET方法：提供四个参数，url,参数字典，成功回调，失败回调
- for in 遍历参数字典,拼接参数
export default class XMGRequest {
/**
* GET请求
* @param {字符串} url
* @param {字典} param
* @param {成功回调(param:JSON)} success
* @param {失败回调(param:ERROR)} failure
* @returns 功能:GET请求
*/
static GET(url,param,success,failure){
// 总长度
var totalParamStr = '';
// 判断字典参数是否有值
// 把字典转换为字符串,如果字典为空,转换为'{}'
var jsonStr = JSON.stringify(param);
if (jsonStr != '{}') {
// 符合
var mark = '?';
var i = 0;
for (key in param){
if (i > 0) {
mark = '&'
}
var value = param[key];
var paramStr = mark + key + '=' + value;
totalParamStr += paramStr;
i++;
}
}
// 拼接url
url += totalParamStr;
fetch(url)
.then((response)=>response.json())
.then((json)=>{
success(json);
})
.catch((error)=>{
failure(error)
})
}
}
搭建Get请求服务器
- 使用Node.js搭建，想了解的node.js，可以点击Node.js搭建服务器，Node.js发送网络请求了解
- 利用Node.js搭建中转服务器，服务器内部在请求其他数据
// 获取express模块
var express = require('express');
// 获取http请求
var httpRequest = require('request');
// 创建服务器
var server = express();
server.get('/home',function (request,response) {
// /home?a=list&c=data&type=1
// 字符串截取,也可以使用request.query获取请求参数
var url = request.url;
var i = url.indexOf('?');
var paramStr = url.substring(i);
var baseUrl = 'http://api.budejie.com/api/api_open.php';
url = baseUrl + paramStr;
httpRequest(url,function (error, res, data) {
response.send(data)
});
});
server.listen(3000);
Post请求
- Post请求有三种方式
- application/x-www-form-urlencoded： 普通http请求方式，参数是普通的url参数拼接
- application/json： JSON请求方式，参数是json格式
- multipart/form-data: 文件上传
Fetch还有可选的第二个参数，可以用来定制HTTP请求一些参数。你可以定制header参数，请求方式，提交数据。
application/x-www-form-urlencoded请求
- 注意:Content-Type:一定不要写错,否则服务器解析不出来
// application/x-www-form-urlencoded
Post(){
var requestOptional = {
method:'POST',
headers:{
'Content-Type':'application/x-www-form-urlencoded'
},
body:'account=xmg&pwd=123'
};
fetch('http://192.168.0.102:3000/login',requestOptional)
.then((response)=>response.json())
.then((json)=>{
console.log(json)
})
.catch((error)=>{
console.log(error)
})
}
application/x-www-form-urlencoded服务器搭建
- bodyParser：用于解析post参数
// 获取express模块
var express = require('express');
// 获取http请求
var httpRequest = require('request');
// post解析对象
var bodyParser = require('body-parser');
// 创建服务器
var server = express();
// 这个代码必须写在post之前,因为bodyParser框架,用于中间件,而中间件优于get,post请求调用
// 正确的逻辑也是,先把post请求参数解析出来,然后在post中就能通过body拿到了
// 由于bodyParser必须写在post之前,因此接口文档就应该写清楚post请求参数类型,否则传入错误,就不能解析了.
// 不同post参数类型,就必须用对应的解析器,否则解析出来就不对了
// 解析post的参数,post参数是url拼接类型
// application/x-www-form-urlencoded
var jsonParser = bodyParser.urlencoded({extended:true});
// 使用中间件,当拦截到login,就立马执行,bodyParser因为用于中间件
server.use('/login',jsonParser);
server.post('/login',function (request,response) {
// 获取post请求参数
console.log(request.body);
// 根据这个去查询数据
});
server.listen(3000);
application/json请求
- JSON.stringify(param) => JSON对象转字符串 {name:xmg} => '{name:xmg}'
- 因为body:只能放字符串,所以必须要把JSON对象转字符串
- 注意:Content-Type:一定不要写错,否则服务器解析不出来
// application/json
Post(){
var param = {
account:'xmg',
pwd:'123'
};
var paramStr = JSON.stringify(param);
console.log(paramStr)
// post请求描述
var requestDesc = {
method:'POST',
headers:{
'Content-Type':'application/json'
},
body:paramStr
};
// 发送post请求
fetch('http://192.168.0.102:3000/login',requestDesc)
.then((response)=>response.json())
.then((json)=>{
console.log(json)
})
.catch((error)=>{
console.log(error)
})
}
application/json服务器搭建
// 获取express模块
var express = require('express');
// 获取http请求
var httpRequest = require('request');
// post解析对象
var bodyParser = require('body-parser');
// 创建服务器
var server = express();
// 解析post的参数,post参数是url拼接类型
// application/json
var jsonParser = bodyParser.json();
// 使用中间件,当拦截到login,就立马执行,bodyParser因为用于中间件
server.use('/login',jsonParser);
// 监听post请求
server.post('/login',function (request,response) {
// 获取post请求参数
console.log(request.body);
// 根据这个去查询数据
});
server.listen(3000);
Post请求封装
application/x-www-form-urlencoded
/**
* POST请求,application/x-www-form-urlencoded
* @param {字符串} url
* @param {字典} param
* @param {成功回调(param:JSON)} success
* @param {失败回调(param:ERROR)} failure
* @returns 功能:POST请求 application/x-www-form-urlencoded
*/
static PostWithHttpParam(url,param,success,failure){
var body = '';
// 判断字典参数是否有值
// 把字典转换为字符串,如果字典为空,转换为'{}'
var jsonStr = JSON.stringify(param);
if (jsonStr != '{}') {
// 符合
var mark = '';
var i = 0;
for (key in param){
if (i > 0) {
mark = '&'
}
var value = param[key];
var paramStr = mark + key + '=' + value;
body += paramStr;
i++;
}
}
console.log(body);
var requestOptional = {
method:'POST',
headers:{
'Content-Type':'application/x-www-form-urlencoded'
},
body:body
};
fetch(url,requestOptional)
.then((response)=>response.json())
.then((json)=>{
success(json);
})
.catch((error)=>{
failure(error);
})
}
application/json
/**
* POST请求,application/json
* @param {字符串} url
* @param {字典} param
* @param {成功回调(param:JSON)} success
* @param {失败回调(param:ERROR)} failure
* @returns 功能:POST请求 application/json
*/
static PostWithJsonParam(url,param,success,failure) {
var paramStr = JSON.stringify(param);
// post请求描述
var requestDesc = {
method:'POST',
headers:{
'Content-Type':'application/json'
},
body:paramStr
};
// 发送post请求
fetch(url,requestDesc)
.then((response)=>response.json())
.then((json)=>{
success(json);
})
.catch((error)=>{
failure(error);
})
}
