react-native-zfetch

1.3.0 • Public • Published

react-native-zfetch

usage

yarn add react-native-zfetch or npm install --save react-native-zfetch

react-native link rn-fetch-blob

HeaderUtil

配置请求头header;

HeaderUtil.setHeaders({ 'Header-CompanyId':'', 'Header-CurTime':'', 'Header-UserId':'', 'Cookie':'token' });

serverDomain

配置服务器域名,每个server对应dev,test,uat,production域名环境;

Object.assign(serverDomain, AllEnv);

serverEnvironment

配置服务器环境;

serverEnvironment.currentEnvironment = 'test';

httpNetwork

发起网络请求;

httpNetwork.requestAction(actionUrl.loginAction('zan','123456')); //发起请求

cancelRequests

取消已发起的网络请求即,httpNetwork.cancelRequests(array);

注:cancelRequests参数传数组,如接口api/test/login,httpNetwork.cancelRequests(['login'])

Demo

1、初始化环境

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();
}

2、拦截器与适配器

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:{} };
    }
};

3、发起网络请求与取消网络请求

TestPage.js
 
import { httpNetwork } from 'react-native-zfetch';
 
componentDidMount() {
    httpNetwork.requestAction(actionUrl.loginAction('xxx','xxx',pageName), (data) => {
 
    }); //发起请求
}
 
componentWillUnmount() {
    httpNetwork.cancelRequests(['XXX']); //取消网络请求
}

Package Sidebar

Install

npm i react-native-zfetch

Weekly Downloads

1

Version

1.3.0

License

MIT

Unpacked Size

13 kB

Total Files

12

Last publish

Collaborators

  • zhangguozhong