RN实战项目网络请求封装
2023-09-27 14:28:59 时间
RN实战项目网络请求封装
网络相关学习文档,参考 RN中文网文档
RN中主要是用fetch来完成异步网络请求的,传统的ajax慢慢的会被fetch替代
RN中文网fetch API 案例http://www.jianshu.com/p/1cda2b889d47
fetch('https://mywebsite.com/endpoint/', {
method: 'POST', //请求方法 默认get
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json', //数据格式 json或者key-value形式
},
body: JSON.stringify({ //json对象转换为json字符串
firstParam: 'yourValue',
secondParam: 'yourOtherValue',
})
})
getMoviesFromApiAsync() {
return fetch('https://facebook.github.io/react-native/movies.json')
.then((response) => response.json())//回调结果,并转换为json对象 es6写法
.then((responseJson) => {
return responseJson.movies; //给调用者返回数据集合
})
.catch((error) => {
console.error(error); //网络请求出现错误,或者getMoviesFromApiAsync 函数调用者自身出现错误都会被这里catch住
});
}
项目中NetUtils封装
import React,{Component} from 'react';
//这里引入了一个md5加密的库,Github https://github.com/kmend/react-native-md5
//引入方式很简单,npm install react-native-md5 --save
//然后打开项目的package.json 查看,发现此时多了一个依赖
import MD5 from "react-native-md5";
import {
ToastAndroid,
} from 'react-native';
/**
* 网络请求的工具类
*/
export default class NetUtils extends Component{
//构造函数,默认的props,以及state 都可以在这里初始化了
constructor(props){
super(props);
}
/**
* 普通的get请求
* @param {*} url 地址
* @param {*} params 参数
* @param {*} callback 成功后的回调
*/
static get(url,params,callback){
fetch(url,{
method:'GET',
body:params
})
.then((response) => {
if(response.ok){//如果相应码为200
return response.json(); //将字符串转换为json对象
}
})
.then((json) => {
//根据接口规范在此判断是否成功,成功后则回调
if(json.resultCode === "SUCCESS"){
callback(json);
}else{
//否则不正确,则进行消息提示
//ToastAndroid 只针对安卓平台,并不跨平台
ToastAndroid.show(json.resultDesc,ToastAndroid.SHORT);
}
}).catch(error => {
ToastAndroid.show("netword error",ToastAndroid.SHORT);
});
};
/**
* post key-value 形式 hader为'Content-Type': 'application/x-www-form-urlencoded'
* @param {*} url
* @param {*} service
* @param {*} params
* @param {*} callback
*/
static post(url,service,params,callback){
//添加公共参数
var newParams = this.getNewParams(service,params);//接口自身的规范,可以忽略
fetch(url,{
method:'POST',
headers:{
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'//key-value形式
},
body:newParams
})
.then((response) => {
if(response.ok){
return response.json();
}
})
.then((json) => {
if(json.resultCode === "SUCCESS"){
callback(json);
}else{
ToastAndroid.show(json.resultDesc,ToastAndroid.SHORT);
}
}).catch(error => {
alert(error);
//ToastAndroid.show("netword error",ToastAndroid.SHORT);
});
};
/**
* post json形式 header为'Content-Type': 'application/json'
* @param {*} url
* @param {*} service
* @param {*} jsonObj
* @param {*} callback
*/
static postJson(url,service,jsonObj,callback){
fetch(url,{
method:'POST',
headers:{
'Content-Type': 'application/json;charset=UTF-8'
},
body:JSON.stringify(jsonObj),//json对象转换为string
})
.then((response) => {
if(response.ok){
return response.json();
}
})
.then((json) => {
if(json.resultCode === "SUCCESS"){
callback(json);
}else{
ToastAndroid.show(json.resultDesc,ToastAndroid.SHORT);
}
}).catch(error => {
ToastAndroid.show("netword error",ToastAndroid.SHORT);
});
};
/**
* 获取当前系统时间 yyyyMMddHHmmss
*/
static getCurrentDate(){
var space = "";
var dates = new Date();
var years = dates.getFullYear();
var months = dates.getMonth()+1;
if(months<10){
months = "0"+months;
}
var days = dates.getDate();
if(days<10){
days = "0"+days;
}
var hours = dates.getHours();
if(hours<10){
hours = "0"+hours;
}
var mins =dates.getMinutes();
if(mins<10){
mins = "0"+mins;
}
var secs = dates.getSeconds();
if(secs<10){
secs = "0"+secs;
}
var time = years+space+months+space+days+space+hours+space+mins+space+secs;
return time;
};
/**
* 设置公共参数
* @param {*} service 服务资源类型
* @param {*} oldParams 参数 key-value形式的字符串
* @return 新的参数
*/
static getNewParams(service,oldParams){
var newParams = "";
var currentDate = this.getCurrentDate();
var MD5KEY = "XXXXXX";
var digestStr = MD5KEY+service+currentDate+MD5KEY;
newParams = oldParams+"×tamp="+currentDate+"&digest="+this.MD5(digestStr);
return newParams;
};
/**
* 字符串加密
* @param {*} str
*/
static MD5(str){
return MD5.hex_md5(str);
};
/**
* 获取当前系统时间 yyyyMMddHH
*/
static getCurrentDateFormat(){
var space = "";
var dates = new Date();
var years = dates.getFullYear();
var months = dates.getMonth()+1;
if(months<10){
months = "0"+months;
}
var days = dates.getDate();
if(days<10){
days = "0"+days;
}
var time = years+space+months+space+days;
return time;
};
}
测试并使用
import NetUtils from '../net/NetUtils';
/**
* 首页
*/
export default class Index extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
//加载数据
var url = 'http://192.168.2.112:8042/ShengDaAutoPlatform/remit!clerkDetail';
var service = "clerkDetail";
var userInfo;
AsyncStorage.getItem("userInfo", (error, result) => {
if (error) {
} else {
userInfo = eval('(' + result + ')');
var params = "service=clerkDetail&pageSize=10&page=1&userId=" + userInfo.userId;
NetUtils.post(url, service, params, (result) => {
ToastAndroid.show(result.resultDesc, ToastAndroid.SHORT);
});
}
});
};
}
}
由于NetUtils是一个外部的js文件,所以在使用的地方一定要记得import NetUtils from '../net/NetUtils';
这里遇到的坑:
一:import 的时候 NetUtils.js 后面的.js可以去掉,路径填写相对路径
二:NetUtils.js里面 export default class NetUtils extends Component{} 组件必须export default 声明,切记一个js文件中只能有且仅有一个default声明
三:get post postJson方法都用了static 声明,直接NetUtils.post/get/postJosn即可
相关文章
- block传值以及利用block封装一个网络请求类
- python 封装logging日志模块,与selenium连用
- web自动化测试:Selenium+Python基础方法封装
- Go/Python/Erlang编程语言对比分析及示例 基于RabbitMQ.Client组件实现RabbitMQ可复用的 ConnectionPool(连接池) 封装一个基于NLog+NLog.Mongo的日志记录工具类LogUtil 分享基于MemoryCache(内存缓存)的缓存工具类,C# B/S 、C/S项目均可以使用!
- EntityFramework Core 封装
- 制作一款STC32G封装为TSSOP20的测试电路板
- React Native商城项目实战04 - 封装TabNavigator.Item的创建
- 【自动化测试】一位自动化测试工程师居然不会封装框架?神秘自动化测试框架......
- 在 Linux 下使用 TCP 封装器来加强网络服务安全
- Java面向对象的封装
- vue---axios的封装
- 封装ellipsis组件
- vue项目中如何封装api,使请求方法清晰,适合协作开发
- 将summernote在vue项目中封装成组件
- 封装一个简化版的面包屑组件
- vue项目构建实战基础知识:SPA理解/RESTful接口介绍/static目录配置/axios封装/打包时map文件去除
- Unity 工具 之 简单引用计数器的封装整理,继承即可使用,便于简单计数使用及相关计算事件触发
- 2.31 OrCAD中怎么批量更新封装库文件?
- 原生js源码之bind方法,兼容性封装(IE8)
- Python与Django项目开发,使用inspect、signature、装饰器进行参数检查,QuerySet转List、Dict,以及数据操作方法的二次封装,解决业务和数据存储之间的耦合
- 一个整合OkHttp 、Retrofit 、Volley 、RxJava、Novate多种开源网络框架的项目,高度的封装和集成,Android中Web网络请求一行代码解决
- 关于javascript的cookie的封装