RN实战项目网络请求封装(二)
2017-04-11 10:55
375 查看
RN实战项目网络请求封装(二)
网络相关学习文档,参考 RN中文网文档
RN中主要是用fetch来完成异步网络请求的,传统的ajax慢慢的会被fetch替代
RN中文网fetch API 案例
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即可
END
相关文章推荐
- RN实战项目网络请求封装
- ReactNative 项目实战 (2) ListView 使用 网络请求以及下拉刷新 (条目控件封装)
- iOS项目中网络层实现自动转为对象的网络请求工具封装
- 项目优化-Http网络请求的封装
- 网络层架构设计与实战五之客户端设计之请求头响应头的封装
- 项目中对网络请求的封装,加入了全局缓存机制
- 微信小程序教学第二章(含视频):小程序中级实战教程之预备篇 - 封装网络请求及 mock 数据
- react-native 项目实战 -- 新闻客户端(4) -- 请求网络数据
- Android项目开发全程(三)-- 项目的前期搭建、网络请求封装是怎样实现的
- iOS项目中的网络请求和上下拉刷新封装
- 项目中对网络请求的封装,加入了全局缓存机制
- 微信小程序教学第二章(含视频):小程序中级实战教程之预备篇 - 封装网络请求及 mock 数据
- SnailApp项目---网络请求封装
- swift项目第十天:网络请求工具类的封装
- Android 项目(一):网络请求封装(一)
- [iOS微博项目 - 3.3] - 封装网络请求
- 微信小程序-项目案例 (三)全局变量及封装网络请求
- swift学习五天 项目实战-知乎日报之网络交互NSURLConnection
- 封装 网络请求 (可以实现多个界面复用)
- 封装Ger网络请求