使用网络

配置及调用

WeTrident 推荐将服务器端的API统一管理，相比于把api接口直接零散的写入代码，配置的方式可以为后续针对接口的数据分析提供诸多便利。WeTrident中网络的配置如下:

  1. // modules/book/cgi/index.js
  2. export default {
  3.   requestBookList: {
  4.     baseURL: 'https://www.mocky.io/',
  5.     url: '/v2/5cedf70f300000bd1f6e97fd',
  6.     desc: '请求书籍列表',
  7.   }
  8. }

WeTrident App中建议统一管理后台的API，每个模块强相关的后台API，都放到 modules/$moduleName/cgi/目录统一管理，并且通过配置都方式配置每个API需要的信息。主要出于如下几点考虑：

  • 统一的存放方便后期维护
  • 统一的配置格式要求每个接口要填写一些关键字段，方便以后理解。所有字段的说明见 API配置：
字段名说明是否必须
descAPI的描述,可以用于调试日志/数据分析是
baseURLAPI的baseURL是
urlAPI的接口路径，和baseURL拼接成完成的API路径哦是
mockable表示此接口是否直接返回mock数据否
requestAPI的请求结构否
responseAPI的响应结构，用于定义Mock的响应否

定义完接口以后，我们在BookListScene中通过APIClient使用此接口。

  1. // modules/book/BookListScene/BookListScene.js
  2. export default class BookListScene extends WeBaseScene {
  3.   // ...
  4.   componentDidMount () {
  5.     // 请求
  6.     APIClient.request(CGI.requestBookList, {
  7.       start: 0,
  8.       pageSize: 10
  9.     }).then(response => {
  10.       console.log(response)
  11.     }, error => {
  12.       console.warning(error)
  13.     })
  14.   }

使用Mock

开发过程中，可能会需要再服务器端接口开发完之前开始开发前端，为了解决没有接口可用的问题，WeTrident支持了mock的功能，只需要简单的再接口配置中配置mock的返回即可，例如上面的拉去书籍列表的接口如下配置以后即可支持mock，APIClient发出请求以后会直接返回mock数据。response是一个数组，这个数组里面的内容随机返回，用于模拟调试失败或者多种返回数据的情况。

  1. // modules/book/cgi/index.js
  2. import {AxiosMocker} from '@webank/trident'
  3. export default {
  4.   requestBookList: {
  5.     baseURL: 'https://www.mocky.io/',
  6.     url: '/v2/5185415ba171ea3a00704eed',
  7.     desc: '请求书籍列表',
  9.     // set true to return mock data for this api
  10.     mockable: true,
  11.     request: {},
  12.     response: [
  13.       // mock network error
  14.       AxiosMocker.networkError(),
  15.       // mock network timeout
  16.       AxiosMocker.timeout(),
  17.       // mock a normal response, it show the normal response data structure too
  18.       AxiosMocker.success([
  19.         {
  20.           title: '经济学原理',
  21.           author: '曼昆',
  22.           coverURL: 'https://img3.doubanio.com/view/subject/l/public/s3802186.jpg',
  23.           publishTime: '2009-4-1',
  24.           pages: 540,
  25.           ISBN: '9787301150894'
  26.         },
  27.         {
  28.           title: '失控-全人类的最终命运和结局',
  29.           author: '[美] 凯文·凯利 ',
  30.           coverURL: 'https://img3.doubanio.com/view/subject/l/public/s4554820.jpg',
  31.           publishTime: '2010-12',
  32.           pages: 707,
  33.           ISBN: '9787513300711'
  34.         }
  35.       ])
  36.     ]
  37.   }
  38. }

在WeBookStore中，我们按照要求把BookDetailScene的逻辑补充完整。这里主要是完善界面和添加借阅接口的请求，这里略过，补充完以后，BookDetailScene内容如下：

  1. import React, { Component } from 'react'
  2. import { View, Text } from 'react-native'
  3. import { AppNavigator, WeBaseScene, Toast } from '@webank/trident'
  4. import BookDetail from './components/BookDetail'
  5. import SimpleButton from './components/SimpleButton'
  6. import BookDetailService from './BookDetailService'
  8. export default class BookDetailScene extends WeBaseScene {
  9.   static navigationOptions = ({ navigation: { state: { params = {} } } }) => ({
  10.     headerTitle: params.title
  11.   })
  13.   render () {
  14.     const bookDetail = (this.props.bookList || []).find(item => item.ISBN === this.params.ISBN)
  16.     if (!bookDetail) {
  17.       return null
  18.     }
  19.     return (
  20.       <View>
  21.         <BookDetail {...bookDetail} />
  22.         <SimpleButton
  23.           style={{
  24.             marginTop: 8,
  25.             paddingHorizontal: 8
  26.           }}
  27.           onPress={() => {
  28.             BookDetailService.requestBorrowBook().then(response => {
  29.               Toast.show(response.data.ret_msg)
  30.               AppNavigator.book.ResultScene({ISBN: this.params.ISBN})
  31.             }, error => {
  32.               Toast.show('network error' + JSON.stringify(error))
  33.             })
  34.           }} title={'借阅'} />
  35.       </View>
  36.     )
  37.   }
  38. }

如果请求后台成功，直接跳转ResultScene，这里也把ResultScene的界面补充完成，完成以后 ResultScene 代码如下：

  1. import React, { Component } from 'react'
  2. import { View, Text, Image } from 'react-native'
  3. import { AppNavigator, WeBaseScene } from '@webank/trident'
  5. export default class ResultScene extends WeBaseScene {
  6.   render () {
  7.     const bookDetail = (this.props.bookList || []).find(item => item.ISBN === this.params.ISBN)
  9.     return (
  10.       <View style={[{
  11.         flexDirection: 'column',
  12.         justifyContent: 'flex-start',
  13.         alignItems: 'center',
  14.       }, this.props.style]}>
  15.         <Image style={{
  16.           marginTop: 80,
  17.           marginBottom: 20,
  18.           width: 120,
  19.           height: 120,
  20.         }} source={require('assets/images/success.png')} />
  21.         <Text>{`借阅《${bookDetail.title}》成功`}</Text>
  22.       </View>
  23.     )
  24.   }
  25. }

使用Cache

除了可以发起正常请求，WeTrident的APIClient还支持了客户端的缓存。目前的缓存支持三种模式配置缓存时间：

  • 全局缓存时间配置
  1. APIClient.setDefaultCacheMaxAgeInMs(5 * 60 * 1000)
  • API静态配置缓存时间
  1. // modules/book/cgi/index.js 
  2. import {AxiosMocker} from '@webank/trident'
  3. // 接口定义
  4. export default {
  5.   requestBookListUseCache: {
  6.     // 通过配置设置缓存时间
  7.     cacheMaxAgeInMs: 60000,
  8.     baseURL: 'https://www.mocky.io/',
  9.     method: 'get',
  10.     url: '/v2/5dc964632f0000760073ec4b',
  11.     desc: '请求书籍列表',
  12.     request: {
  13.     },
  14.   }
  15. }
  18. APIClient.request(CGI.requestBookListUseCache).then(...)
  • API调用动态设置缓存时间
  1. APIClient.request(
  2.   CGI.requestBookListUseCache,
  3.   undefined,
  4.   undefined,
  5.   undefined,
  6.   { cacheMaxAgeInMs: 10 }
  7. ).then(...)

更多用法见：APIClient API