react-native-easy-app 详解与使用之(二) fetch

本文涉及的产品
日志服务 SLS,月写入数据量 50GB 1个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介:

react-native-easy-app 是一款为React Native App快速开发提供基础服务的纯JS库(支持 IOS & Android),特别是在从0到1的项目搭建初期,至少可以为开发者减少30%的工作量。

react-native-easy-app 主要做了这些工作:
1. 对AsyncStorage进行封装,开发者只需几行代码即可实现一个持久化数据管理器。
2. 对fetch进行封装,使得开发者只需关注当前App的前后台交互逻辑和协议,定义好参数设置及解析逻辑即可。
[3. 重新封装了RN的View、Text、Image、FlatList 使用得这些控件在适当的时候支持事件或支持icon与文本,能有效减少布局中的嵌套逻辑。]()
[4. 通过设置一个屏幕参考尺寸,重置XView、XText、XImage的尺寸,实现自动多屏适配]()

可能有人觉得,不同的App对Http请求的要求各异,第三方库怎么可能做到全面的封装,就算做到了,那也必定会 封装过度

一千个人心中,有一千个哈姆雷特,也许我的思路能给你带来不一样的启发也未可知呢?

网络请求(fetch)

我们先来看下React native中文网给出的fetch使用示例:

  • 异步请求(核心代码)
fetch('https://facebook.github.io/react-native/movies.json')
    .then((response) => response.json())
    .then((responseJson) => {
      return responseJson.movies;
    })
    .catch((error) => {
      console.error(error);
    });
  • 同步请求(核心代码)
try {
    // 注意这里的await语句,其所在的函数必须有async关键字声明
    let response = await fetch('https://facebook.github.io/react-native/movies.json');
    let responseJson = await response.json();
    return responseJson.movies;
  } catch (error) {
    console.error(error);
  }

RN平台的fetch请求很简洁,那我们再看看react-native-easy-app的请求 XHttp是不是也可以方便快捷的发送请求呢?

  • 异步请求(核心代码) 示例 1
 import { XHttp } from 'react-native-easy-app';

 XHttp().url('https://facebook.github.io/react-native/movies.json').execute('GET')
   .then(({success, json, message, status}) => {
      console.log(json.movies)
    })
    .catch(({message}) => {
        showToast(message);
    })
  • 同步请求(核心代码)示例 2
  import { XHttp } from 'react-native-easy-app';

  const response = await XHttp().url('https://facebook.github.io/react-native/movies.json').execute('GET');
  const {success, json, message, status} = response;
  console.log(json.movies)
  • 异步请求2(核心代码)示例 3
   import { XHttp } from 'react-native-easy-app';

   XHttp().url('https://facebook.github.io/react-native/movies.json').get((success, json, message, status)=>{
       console.log(json.movies)
   });

通过执行上面三段示例代码,发现输出了一致的结果(电影列表数组):

movies

通过对比发现 XHttp 的使用与React Native平台提供的fetch很相似,其execute('get')方法返回的是一个promise对象,故也可以像fetch一样,发送同步或异步请求。另外还可以通过[method]+回调的形式发送请求。

相比原生fetch请求,XHttp 却返回了多个参数,我们打印一下示例2中的response看看里面都有啥?输出结果,格式化后如下:

response

  1. success => [true | false] 请求成功或失败的标识(默认以Http的请求状态码:[ status >= 200 && status < 400 ] 作为判断依据)。
  2. json => [Json Object | originText] 默认为请求返回的json对象,必要时可以指定返回纯文本字符串(若请求结果为非标准Json,如XML结构或其它)或通过自定义配置指定请求返回的数据结构。
  3. message 默认情况下,请求成功时:为[code+url],失败时:则为错误信息[错误信息+code+url],若开发者指定了特定的解析方式,则由开发者制定。
  4. status 默认情况下为Http请求的status code,可由开发者制定,返回自定义的业务逻辑请求状态码

通过上面的示例, react-native-easy-app 的 XHttp 可以像使用fetch一样方便快捷的发送Http请求,而且还包含请求码,错误信息,结果也被转化为了json对象,使用我们发送请求更加方便了。

但在实际的App开发中,我们Http请求框架的要求不只是能发送简单的Http请求就可以了,比如说,需要打印请求日志、设置header参数、统一处理解析逻辑,甚至可能处理返回的结构不是标准的json数据等各种需求。

我们来看看 react-native-easy-app 的 XHttp 能满足我们哪些需求:
注:上面三个示例的请求方式各有所长,下文发送请求示例的地方我都选择使用请求 示例 3 的方式举例

  • 需求 1 :能支持get、post、put、delete等基本常用类型的请求

    • 框架会自动根据输入的请求类型,自动会处理请求的body有无问题
    • 1、通过XHttp 的execute('method')方式发送请求自然是没有问题
    • 2、通过method + 回调的形式(满足90%的情况),我问下的情况怎么办?不用担心框架提供了另一种方式实现,即:
XHttp().url('https://facebook.github.io/react-native/movies.json').request('HEAD', (success, json, message, status) => {
    console.log(json.movies);
})

  • 需求 2:能支持常用的contentType设置,如 application/json、multipart/form-data、application/x-www-form-urlencoded等

    • 当然并不只是简单的传个参数而已,必须能根据请求contentType按正常的方式处理body,如果contentType若为multipart/form-data,则使用FormData去接收拼接开发者传入的参数
    • 1、 XHttp 有三种方式设置contentType,三种常用的方式被提取了出来,如下分别是:直接设置;通过header设置;通过方法直接指定。开发者设置了相应的方式之后,就可以放心的发送Http请求了,剩下的框架会处理(下面示例为:上传图片设置):

contentType


  • 需求 3:能支持超时设置;支持日志打印;支持返回非标准Json以及baseUrl的拼接

    • 请求超的原理是通过 Promise.race 实现;
    • 1.由于超时请求并不完全属于某个特定的请求,故引入了一个公共配置对象:XHttpConfig,开发者可以通过两种试设置请求超时配置,如下:
import { XHttpConfig } from 'react-native-easy-app';

XHttpConfig().initTimeout(300000); //全局配置,设置所有Http请求的超时时间为30秒

XHttp().url('https://facebook.github.io/react-native/movies.json').timeout(15000) //设置当前请求超时间为15秒
    .get((success, json, message, status) => {
    })
  • 2、日志打印也是通过 XHttpConfig().initHttpLogOn(true) 设置为 true 即可,设置完成后,我们发送请求,看看控制台的输出日志:
XHttpConfig().initHttpLogOn(true);
XHttp().url('https://facebook.github.io/react-native/movies.json').get((success, json, message, status) => {
})

httplog

可以看出控制台打印出了详细的日志,是不是很方便?

  • 3、现在的移动开发99%的情况下前后台交互都是使用的json格式数据,但很难保证一些特殊情况下,App不使用非标准json数据格式的Http请求。比如需要请求一些老网站或者使用一些第三方开放的老接口。这时候只需要指定返回纯文件数据即可,下面找一个返回xml格式的接口,请求看看结果:
let url = 'http://www.webxml.com.cn/WebServices/MobileCodeWS.asmx/getDatabaseInfo'
XHttp().url(url).pureText().get((success, text, message, status) => {
    console.log('XML data', text)
})

控制台输出结果如下(通过XHttp的 pureText() 指定返回的数据以纯文本返回):
httpXml

  • 4、至于baseUrl的拼接,则是为了在App开发中,减少不必要的baseUrl的重复使用(程序通过判断传入的url是否是完整按需拼接BaseUrl),使用方法如下:
import { XHttpConfig, XHttp } from 'react-native-easy-app';

XHttpConfig().initBaseUrl('http://www.webxml.com.cn/WebServices/');
XHttp().url('MobileCodeWS.asmx/getDatabaseInfo').get((success, text, message, status) => {
    console.log('XML data', text)
})

  • 需求 4:能自由设置公共的params、headers;发送Http请求的时候,也能自由设定当前请求的header及param数据。
import { XHttpConfig, XHttp } from 'react-native-easy-app';

XHttpConfig().initHttpLogOn(true)
    .initBaseUrl('https://facebook.github.io/')
    .initContentType('multipart/form-data')
    .initHeaderSetFunc((headers, request) => {
        headers.headers_customerId = 'headers_CustomerId001';
        headers.headers_refreshToken = 'headers_RefreshToken002';
    })
    .initParamSetFunc((params, request) => {
        params.params_version = 'params_version003';
        params.params_channel_code = 'params_channel_code004';
        params.testChannel = 'testChannel005';
    });

XHttp().url('react-native/movies.json')
    .header({'Content-Type': 'application/json', header_type: 'header_type006'})
    .param({paramUserName: 'paramUserName007', testChannel: 'testChannel008'})
    .post((success, text, message, status) => {
    })

从代码中可以看出通过XHttpConfig配置,我们设置了公共的heders、params,然后在通过XHttp发送请求时,又设置了特定的header和param的值,同时了修改了contentType的类型,并改为post请求,执行代码我们看看控制台日志内容:

common_params

通过控制台打印的日志,我们可以很清晰的看到,参数从001~008所有的参数(除了005)都能有效设置到请求当中。但为什么公共参数 params.testChannel = 'testChannel005'; 的设置没有生效呢,其实是因为,XHttp中的接口请求的私有参数中也设置了一个:testChannel: 'testChannel008' 的参数,两者的Key相同,所以被接口私有参数给覆盖了(细心的同学也可以发现,日志中'Content-Type': 'application/json',contentType的类型也被覆盖了),这说明了接口的私有参数具有更高的优先级,这是合理的同时也使接口的请求更灵活方便。


  • 需求 5:能支持自定义数据解析,这也是最重要的。
    每个app都有一套前后台数据交互方式,对于返回的数据都有统一固定的格式:方便前端解析处理,如 cryptonator.com 网站提供的比特币查询接口,接口url:https://api.cryptonator.com/api/ticker/btc-usd。我们先通过postman请求一下:

request_postman

返回的数据格式如下:

{
  "ticker": {
    "base": "BTC",
    "target": "USD",
    "price": "5301.78924881",
    "volume": "179358.70555921",
    "change": "-21.18183054"
  },
  "timestamp": 1584291183,
  "success": true,
  "error": ""
}

可以看出,接口返回的数据结构中,有三个主要字段:

  1. success 接口逻辑成功与失败的判断依据。
  2. error 接口若失败时,包含错误信息。
  3. ticker 接口返回的主要数据的主体。

以前面XHttp发送请求,接口的成功与否的判断依然是http的status来判断,显示达不到要求,请求cryptonator.com网站api数据统一解析的基本要求,那怎么自定义数据解析呢?我们试试看。

import { XHttpConfig, XHttp } from 'react-native-easy-app';

XHttpConfig().initHttpLogOn(true)
    .initBaseUrl('https://www.cryptonator.com/api/')
    .initParseDataFunc((result, request, callback) => {
        let {success, json, message, status} = result;
        callback(success && json.success, json.ticker || {}, json.error || message, status);
    });

XHttp().url('ticker/btc-usd').get((success, json, message, status) => {
    console.log('success = ' + success);
    console.log('json    = ' + JSON.stringify(json));
    console.log('message = ' + message);
    console.log('status  = ' + status);
});

我们再看下控制台输出的请求日志与Http请求打印的4个标准参数的内容:

custom_parse_data_log

custom_parse_data

发现没有,json对应的值就是返回的数据结构中:ticker对应的数据。其它字段并不能反映出来,因为数据刚好与默认判断条件吻合或为空。这是怎么实现的呢?

因为通过XHttpConfig的initParseDataFunc方法,我们重新定义了,接口请求返回的标准字段的值:

  1. success => success && json.success 只有当接口请求与返回的成功标记同时为true的时候才认为是成功
  2. json => json.ticker 直接读取json.ticker的值(若为空,则返回一个没有任何属性对象)
  3. message => json.error || message 优先获取接口返回的错误信息(若为空,则读取Http请求的错误信息)
  4. status => status 由于些api并没有code判断标记,故依然使用Http的status

这样Http请求返回的参数自定义问题就解决了,这时候可能有人会说:我的app不只是请求一个后台或者还要请求第三方接口,不同的后台返回的数据结构也完全不一样,这种情况下么处理?不用担心,这种情况也是有解的:

  • 办法一(非标准接口较少的情况):
    比如说,我的请求以cryptonator.com网站的api为主,偶尔要请求域名查询接口:

https://api.domainsdb.info/v1/domains/search?domain=zhangsan&zone=com,这个时候,我可以依然保持前面的自定义解析方式不变,在请求域名查询的时候,增加一个标记:

FHttp().url('https://api.domainsdb.info/v1/domains/search')
   .param({domain: 'zhangsan', zone: 'com'})
   .contentType('text/plain')
   .rawData()
   .get((success, json, message, status) => {
       if (success) {
           console.log('rawData', JSON.stringify(json))
       } else {
           console.log(message)
       }
   })

接口请求打印的日志为:
rawData

请求依然成功,各参数也没有问题,因为在发送Http请求的时候增加了一个标记rawData(),这个标记就是用于特殊处理的,标记当前Http请求需要返回原始的,不做任何解析的数据(设置此标记,会自动忽略用户自定义的数据解析方式)

  • 办法二(也有可能一个App要请求多个不同的平台或者新老版本过渡,而且不同风格的接口数量还不在少数),同时在这种情况下可能请求的参数风格,公共参数也有不同的要求,这就更复杂了,这种情况能否处理?答案是肯定的:

假设当前App要请求三个平台:分别为SA,SB,SC,这三个平台要求不同的公共参数(包括header),且返回的数据结构也完全不一致,这时候我们可以这样处理,配置与请求都可以完全独立的实现:

import { XHttpConfig, XHttp } from 'react-native-easy-app';

XHttpConfig('SA').initHttpLogOn(true) ...

XHttpConfig('SB').initHttpLogOn(true) ...

XHttpConfig('SC').initHttpLogOn(true) ...

const url = 'https://facebook.github.io/react-native/movies.json';

XHttp('SA').url(url) .get((success, json, message, status) =>{
});

XHttp('SB').url(url) .get((success, json, message, status) =>{
});

XHttp('SC').url(url) .get((success, json, message, status) =>{
});

就是这么简单,配置与请求可以通过serverTag来区别,默认情况下使用同一个配置,但若指定了新的serverTag,发送Http请求时就可以通过serverTag来指定使用哪个Http请求的配置,这样同一个app里面,请求不同的服务器,以及处理不同服务器返回的数据也完全没有压力。

通过上面的例子,我们可以看出,XHttpConfig的三个公共配置方法:initHeaderSetFunc、initParamSetFunc、initParseDataFunc 是一个 面向切面的编程模式 ,这些方法还有一个共同的参数request(第二个参数)里面包含了请求的所有原始信息,因此可以有更多的想象空间,就等你去探索。


  • 可能部分同学觉得,框架的参数设置挺方便,但数据的解析我想完全自己实现可以么?当然可以,通过fetch方法,返回的是原fetch请求的promise,框架不做任何处理:

parse_native

  • 也有同学想,框架的解析很方便,我想完全使用框架的解析,但有些参数是放在header里面,我怎么才能在解析数据的时候取到response的header数据呢?这个问题也不用担心,在所有示例中,我列表的解析回调的参数都是4个:(success, json, message, status),但实际上有5个参数,第5就是response,它就是fetch返回的reponse,你可以从里取到任何想要的数据,包括headers
const url = 'https://facebook.github.io/react-native/movies.json';

XHttp().url(url).get((success, json, message, status, response) => {
    console.log(JSON.stringify(response.headers))
});

const {success, json, message, status, response} = await XHttp().url(url).execute('GET');
console.log(JSON.stringify(response.headers))
  • 也有同学可能想到有一种应用场景oauth2需要特别处理:
  1. 发送请求req1,因为accessToken失效而请求失败
  2. 程序通过refreshToken重新获取到了新的accessToken
  3. 拿着新的accessToken重新请求req1

这种应用场景怎么处理呢?

XHttpConfig()
    .initHttpLogOn(true)
    .initBaseUrl(ApiCredit.baseUrl)
    .initContentType(XHttpConst.CONTENT_TYPE_URLENCODED)
    .initHeaderSetFunc((headers, request) => {
        if (request.internal) {
            Object.assign(headers, AuthToken.baseHeaders());//添加基础参数
            headers.customerId = RNStorage.customerId;
            if (RNStorage.refreshToken) {//若refreshToken不为空,则拼接
                headers['access-token'] = RNStorage.accessToken;
                headers['refresh-token'] = RNStorage.refreshToken;
            }
        }
    })
    .initParamSetFunc((params, request) => {
        if (request.internal && RNStorage.customerId) {
            params.CUSTOMER_ID = RNStorage.customerId;
        }
    }).initParseDataFunc((result, request, callback) => {
    let {success, json, response, message, status} = result;
    AuthToken.parseTokenRes(response);//解析token
    if (status === 503) {//指定的Token过期标记
        this.refreshToken(request, callback)
    } else {
        let {successful, msg, code} = json;
        callback(success && successful === 1, selfOr(json.data, {}), selfOr(msg, message), code);
    }
});
static refreshToken(request, callback) {
    if (global.hasQueryToken) {
        global.tokenExpiredList.push({request, callback});
    } else {
        global.hasQueryToken = true;
        global.tokenExpiredList = [{request, callback}];
        const refreshUrl = `${RNStorage.baseUrl}api/refreshToken?refreshToken=${RNStorage.refreshToken}`;
        fetch(refreshUrl).then(resp => {
            resp.json().then(({successful, data: {accessToken}}) => {
                if (successful === 1) {// 获取到新的accessToken
                    RNStorage.accessToken = accessToken;
                    global.tokenExpiredList.map(({request, callback}) => {
                        request.resendRequest(request, callback);
                    });
                    global.tokenExpiredList = [];
                } else {
                    console.log('Token 过期,退出登录');
                }
            });
        }).catch(err => {
            console.log('Token 过期,退出登录');
        }).finally(() => {
            global.hasQueryToken = false;
        });
    }
};

在这里我就不做详细说明了直接贴代码,详细的请大家可以直接阅读源码或者参考 react-native-easy-app 库对应的 示例项目,至于原理是:在请求的时候,将初请求的方法引用保存到了request中,并命名为resendRequest,若获取到新的token之后,重新请求一遍resendRequest方法,传入原来的参数即可。


可能有同学觉得react-native-easy-app封装XHttp与XHttpConfig的方法与参数太多了,根本没办法记住,框架虽好却不便于使用,这个目前可能需要大家参考示例项目来写了(后面我会完善说明文档)。

当然大家有没有发现,在使用这些库方法的时候,代码有提示呢?那就对了。因为我为主要的方法增加了dts描述文档,所以在写代码过程中,如果不记得方法名参数直接通过代码自动提示来写就行了(自动提示在webStorm上的体验更好):

_1

_2

_3

[react-native-easy-app 详解与使用之(三) View,Text,Image,Flatlist]()

想进一步了解,请移步至 npm 或github查看 react-native-easy-app,有源码及使用示例,待大家一探究竟,欢迎朋友们 Star!

如果有任何疑问,欢迎扫码加入RN技术QQ交流群

qq_qrCode

相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
目录
相关文章
|
前端开发
React-24:React中使用fetch发送请求的两种方式
React-24:React中使用fetch发送请求的两种方式
185 0
React-24:React中使用fetch发送请求的两种方式
|
6月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
351 0
|
6月前
|
存储 前端开发 JavaScript
【第34期】一文学会React组件传值
【第34期】一文学会React组件传值
72 0
|
6月前
|
前端开发
【第31期】一文学会用React Hooks组件编写组件
【第31期】一文学会用React Hooks组件编写组件
73 0
|
6月前
|
存储 前端开发 JavaScript
【第29期】一文学会用React类组件编写组件
【第29期】一文学会用React类组件编写组件
71 0
|
6月前
|
前端开发 开发者
【第26期】一文读懂React组件编写方式
【第26期】一文读懂React组件编写方式
61 0
|
6月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
119 0
|
6月前
|
存储 前端开发 中间件
React组件间的通信
React组件间的通信
50 1
|
6月前
|
前端开发 JavaScript API
React组件生命周期
React组件生命周期
116 1
|
6月前
|
存储 前端开发 JavaScript
探索 React Hooks 的世界:如何构建出色的组件(下)
探索 React Hooks 的世界:如何构建出色的组件(下)
探索 React Hooks 的世界:如何构建出色的组件(下)