使用网络

配置及调用

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配置：

定义完接口以后，我们在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