XFetch,一个专为React Native 封装的http库

2018-08-22  本文已影响0人  干吧_7973

在开发react native 应用的时候,发现fetch只支持基本的请求。没有一个地方可以统一处理返回数据,没有超时处理,没法刷新token等,直接使用起来特别麻烦,因此花点时间对其进行了封装。

源码、示例地址:https://github.com/1280103995/react-native-xfetch

Support:
1、支持刷新token;
2、支持超时设置;
3、支持添加header;
4、支持添加param;
5、支持 get、post、put、delete等请求。


使用方式:
1、配置:为所有请求配置baseUrl,header,超时时间,统一数据返回处理,刷新token(如果有这需求)等。

 //设置公共头
 const commonHeader = {
        'Content-Type': 'application/json',
        'platform': 'android',
         'deviceId': '6f580xxxxxx-e7aaaaaaaa0',
         ......
 };
  
 //配置
 XFetchConfig.getInstance()
          .setBaseUrl('Your host')
          .setCommonHeaders(commonHeader)
          .setCommonTimeOut(30000)
          .setResponseConfig(this.handleResponse)
           //如果你不需要刷新token,这里就不用调用setRefreshTokenConfig()
          .setRefreshTokenConfig(this.checkTokenExpired, this.refreshToken, (promise) => {
                //这里返回的promise就是你更新token成功后的回调,你可以在此更新你本地token
                //如果更新失败,去让用户重新登录
                ......
          })


 //在这个方法里,你可以统一处理的返回值,比如,请求响应码为200,但是你的服务器给你的还是报错,假设你服务器定义的code为1表示请求错误,那么你就可以在此过滤,让它走到错误回调里,进行统一Toast
 handleResponse = (isResponseSuccess, response, resolve, reject, data) =>{
    if (isResponseSuccess) {
        resolve(data);
        ......
    }else {
        reject(data);
        ......
    }
  };

  //这里是token过期的判断依据,比如说用户登录了且token过期,才会刷新token,需要的返回值是boolean
  checkTokenExpired = () => isTokenExpired;

  //这是刷新token的请求,根据需要自行配置你刷新token的方式,这里请求不要调用 do()方式,因为框架会在合适的时机自行调用
  refreshToken = () => new XFetch().post('refresh_token')


  --------------------end------------------

2、正常使用:

   let promise = new XFetch().get('your address').setHeaders(...).setParams(...).setTimeOut(...).do().then((res) => {
        ......
    }).catch((error) => {
        ......
    });


    --------------------end------------------

每次请求都需要实例化一个XFetch去请求,在调用do()方法后将发起请求,它会返回一个promise,然后你可以根据需要进行相关的操作。

想看更为详细内容请看demo,欢迎提issue!

上一篇 下一篇

猜你喜欢

热点阅读