yarn add react-native-zfetch or npm install --save react-native-zfetch
react-native link rn-fetch-blob
配置请求头header;
HeaderUtil.setHeaders({ 'Header-CompanyId':'', 'Header-CurTime':'', 'Header-UserId':'', 'Cookie':'token' });
配置服务器域名,每个server对应dev,test,uat,production域名环境;
Object.assign(serverDomain, AllEnv);
配置服务器环境;
serverEnvironment.currentEnvironment = 'test';
发起网络请求;
httpNetwork.requestAction(actionUrl.loginAction('zan','123456')); //发起请求
取消已发起的网络请求即,httpNetwork.cancelRequests(array);
注:cancelRequests参数传数组,如接口api/test/login,httpNetwork.cancelRequests(['login'])
App.js的componentWillMount中配置,为什么是componentWillMount,Component的生命周期componentWillMount->render->componentDidMout,组件是从子组件父组件由内往外执行渲染,所以在componentWillMount进行初始化配置,子组件componentDidMount中执行执行网络请求时网络相应配置已完成。
NetWork.js
import AllEnv from './AllEnv';
import {serverDomain, serverEnvironment, serverInterceptor} from '../netwokModule/dist/index';
import Environment from './Environment';
import interceptor from './serverInterceptor';
const Network = {
initAppEnvironment: function () {
serverEnvironment.currentEnvironment = Environment.currentEnvironment;
Object.assign(serverDomain, AllEnv);
Object.assign(serverInterceptor, interceptor);
}
};
export default Network;
App.js
import Network from './script/networkConfig/Network';
componentWillMount() {
Network.initAppEnvironment();
}
test:{
interceptorResponse:function (json, action) {
console.log('do something');
return responseInterceptor.interceptResponse(json, action);
},
handlerResponseData:function (json) {
return {};
}
}
注意:test表示的是服务器名,多服务器时可以为每个服务器配置不同的拦截逻辑;
const responseInterceptor = {
interceptResponse:function (json,action) {
//处理自己的逻辑
return { isIntercept:false, message:'成功了', error:{} };
}
};
TestPage.js
import { httpNetwork } from 'react-native-zfetch';
componentDidMount() {
httpNetwork.requestAction(actionUrl.loginAction('xxx','xxx',pageName), (data) => {
}); //发起请求
}
componentWillUnmount() {
httpNetwork.cancelRequests(['XXX']); //取消网络请求
}