DataBinder 数据交互方案

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

  1. 在命令行中执行以下命令npm install @icedesign/data-binder@1.0.5 -S

ICE 前后端数据绑定、交互方案。基于一定的约定帮你在组件上绑定一些数据和用来更新数据的 API，让开发者专注于 render 逻辑，从而屏蔽掉 AJAX、state 管理等开发成本。

API

以下 API 会注入到 Class 中，通过 this.props.xxxx 的方式调用。

API说明类型默认值备注
updateBindingData更新数据源func
bindingData返回数据object

使用

1. 配置数据源

DataBinder 基于 HOC 的思路，采用 decorator 的方式使用，即在 class 上面调用并配置相关信息即可生效。

  1. @DataBinder({
  2.   '模块名 key': {
  3.     // AJAX 部分的参数完全继承自 axios ，参数请详见：https://github.com/axios/axios
  4.     url: 'http://xxxx.json',
  5.     method: 'GET',
  6.     params: {
  7.       page: 1
  8.     },
  9.     // 接口默认数据
  10.     defaultBindingData: {
  11.     }
  12.   }
  13. })
  14. class ListView extends Component {
  15.   ...
  16. }

详细的解释下：

  • 模块名 key：必填，每个 key 代表一个数据源（接口）

  • defaultBindingData: 选填 该字段配置当前模块数据初始化默认值，如果当前模块有异步接口配置，则模块的字段需要与接口返回的数据字段一一对应。该参数可选，因为有些接口只需要提交成功即可，无需 UI 变化。

  • 其他：选填，配置请求相关参数，完成前后端通信，默认基于 axios，因此这里可以使用 axios 的任意参数。同时业务可以自定义其他 request client。

2. 请求并使用数据源

对某个 React class 添加 DataBinder 绑定配置之后，DataBinder 会通过 HOC 在组件上添加一个 props bindingData，用来存放配置的所有数据，模块 key 为你对应的 DataSource key 的前部分，比如：配置 account 可以通过 this.props.bindingData.account 获取到被绑定的数据，第一次为 defaultBindingData 里面配置的数据。

因此你可以在你 render 部分的代码编写如下代码调用：

  1. @DataBinder({
  2.   listData: {
  3.     url: '/getAccountTableList.json',
  4.   },
  5. })
  6. class ListView extends Component {
  7.   componentDidMount() {
  8.     // 组件加载时获取数据源，数据获取完成会触发组件 render
  9.     this.props.updateBindingData('dataSource');
  10.   }
  12.   render() {
  13.     const { listData } = this.props.bindingData;
  14.     return (
  15.       <div>
  16.         <Table loading={listData.__loading} dataSource={listData.list} />
  17.       </div>
  18.     );
  19.   }
  20. }

常见问题

接口协议规范

DataBinder 对数据接口的 response 做了一层规范，不符合该规范的接口将无法正常获取到数据，response 规范：

  1. {
  2.   // 必选：标记接口是否成功，非 SUCCESS 都视为失败
  3.   "status": "SUCCESS",
  4.   // 可选：status 为非 SUCCESS 时显示报错 UI 会使用该字段
  5.   "message": "成功",
  6.   // 必选：实际数据，会将 data 下的所有字段挂载在对应的 bindingData 上
  7.   "data": {
  8.     "dataSource": [],
  9.     "page": 1
  10.   }
  11. }

如果业务里的接口跟该规范不符，可以通过 responseFormatter 做一次转换。具体请参见组件 demo。

自定义前后端通信方式 requestClient

DataBinder 默认使用 axios 完成前后端通信，实际场景里业务可能使用 jsonp，RPC 或者其他协议通信，此时需要通过自定义 requestClient 的方式实现，具体请参见组件 demo。

自定义请求 callback

DataBinder 默认的请求成功和失败的行为是弹一个 Toast 将接口的 message 字段信息展示出来。如果你需要自定义全局的成功失败行为，可以通过自定义 callback 的方式实现，具体请参见组件 demo。

业务自定义 DataBinder

如果业务里出现类似上述所说的场景，比如：接口规范不一致、需要全局统一处理请求失败成功逻辑、使用非 axios 的方式请求数据（比如 jsonp），推荐基于 DataBinder 封装一个自定义的 DataBinder，然后代码里使用自定义 DataBinder，具体请参见组件 demo。

代码示例

简单的用法

通过 GET 方式请求数据，基于 __loading 属性可以区分请求的不同状态，基于 __error 属性可以区分接口是否报错。

DataBinder 数据交互方案 - 图1

查看源码在线预览

  1. import React, {Component} from 'react';
  2. import ReactDOM from 'react-dom';
  3. import DataBinder from '@icedesign/data-binder';
  4. import {
  5.   Button, Loading
  6. } from '@alifd/next';
  8. @DataBinder({
  9.   fooData: {
  10.     url: 'https://www.easy-mock.com/mock/5cc669767a9a541c744c9be7/databinder/success',
  11.     defaultBindingData: {
  12.       foo: 'bar'
  13.     }
  14.   }
  15. })
  16. class App extends Component {
  17.   componentDidMount() {
  18.     this.props.updateBindingData('fooData', {
  19.       params: {
  20.         key: 'init'
  21.       }
  22.     }, (response) => {
  23.       // 请求回调，可按需使用
  24.       console.log('数据加载完成啦', response);
  25.     });
  26.   }
  28.   refreshFoo = () => {
  29.     this.props.updateBindingData('fooData', {
  30.       params: {
  31.         bar: 'foo'
  32.       }
  33.     });
  34.   };
  36.   render() {
  37.     const {fooData} = this.props.bindingData;
  39.     return (
  40.       <div>
  41.         <Loading visible={fooData.__loading}>
  42.           foo 的值： {fooData.foo}
  43.         </Loading>
  44.         <div style={{marginTop: 10}}>
  45.           <Button onClick={this.refreshFoo}>主动获取新数据</Button>
  46.         </div>
  47.         <h3>数据加载中：{fooData.__loading ? '是' : '否'}</h3>
  48.         <h3>接口是否报错：{fooData.__error ? fooData.__error.message : '无'}</h3>
  49.       </div>
  50.     );
  51.   }
  52. }
  54. ReactDOM.render((
  55.   <App />
  56. ), mountNode);

POST 请求获取数据

通过 POST 请求获取数据，POST 请求数据时，请求参数可以放在 url query 或者 body 上，具体由接口实现决定：- url query: 通过 params 参数指定- body: 通过 data 参数指定具体可参考 axios 的文档说明。

DataBinder 数据交互方案 - 图2

查看源码在线预览

  1. import React, {Component} from 'react';
  2. import ReactDOM from 'react-dom';
  3. import DataBinder from '@icedesign/data-binder';
  4. import {
  5.   Button, Loading
  6. } from '@alifd/next';
  8. @DataBinder({
  9.   fooData: {
  10.     url: 'https://www.easy-mock.com/mock/5cc669767a9a541c744c9be7/databinder/post',
  11.     method: 'POST',
  12.     defaultBindingData: {
  13.       foo: 'bar'
  14.     }
  15.   }
  16. })
  17. class App extends Component {
  18.   componentDidMount() {
  19.     this.props.updateBindingData('fooData', {
  20.       // 参数放在 query 上
  21.       params: {
  22.         key: 'init'
  23.       }
  24.     });
  25.   }
  27.   refreshFoo = () => {
  28.     this.props.updateBindingData('fooData', {
  29.       // 参数放在 body 上
  30.       data: {
  31.         bar: 'foo'
  32.       }
  33.     });
  34.   };
  36.   render() {
  37.     const {fooData} = this.props.bindingData;
  39.     return (
  40.       <div>
  41.         <Loading visible={fooData.__loading}>
  42.           foo 的值： {fooData.foo}
  43.         </Loading>
  44.         <div style={{marginTop: 10}}>
  45.           <Button onClick={this.refreshFoo}>主动获取新数据</Button>
  46.         </div>
  47.       </div>
  48.     );
  49.   }
  50. }
  52. ReactDOM.render((
  53.   <App />
  54. ), mountNode);

一个组件多个数据源

某些场景下，一个组件会用到多个数据源，通过 key 来区分即可。

DataBinder 数据交互方案 - 图3

查看源码在线预览

  1. import React, {Component} from 'react';
  2. import ReactDOM from 'react-dom';
  3. import DataBinder from '@icedesign/data-binder';
  4. import {
  5.   Button,
  6.   Loading
  7. } from '@alifd/next';
  9. @DataBinder({
  10.   foo1Data: {
  11.     url: 'https://www.easy-mock.com/mock/5cc669767a9a541c744c9be7/databinder/success',
  12.     defaultBindingData: {
  13.       foo: 'bar'
  14.     }
  15.   },
  16.   foo2Data: {
  17.     url: 'https://www.easy-mock.com/mock/5c7c9334869f506acc184ff7/ice/foo2',
  18.     defaultBindingData: {
  19.       foo: 'bar'
  20.     }
  21.   }
  22. })
  23. class App extends Component {
  25.   refreshFoo1 = () => {
  26.     this.props.updateBindingData('foo1Data', {
  27.       params: {
  28.         bar: 'foo'
  29.       }
  30.     });
  31.   };
  32.   refreshFoo2 = () => {
  33.     this.props.updateBindingData('foo2Data', {
  34.       params: {
  35.         bar: 'foo'
  36.       }
  37.     });
  38.   };
  40.   render() {
  41.     const {foo1Data, foo2Data} = this.props.bindingData;
  43.     return (
  44.       <div>
  45.         <div>
  46.           <Loading visible={foo1Data.__loading}>
  47.             <div>
  48.               foo1 的值： {foo1Data.foo}
  49.             </div>
  50.           </Loading>
  51.           <div style={{marginTop: 10}}>
  52.             <Button onClick={this.refreshFoo1}>请求获取 foo1 新数据</Button>
  53.           </div>
  54.         </div>
  55.         <div style={{marginTop: 30}}>
  56.           <Loading visible={foo2Data.__loading}>
  57.             <div>
  58.               foo2 的值： {foo2Data.foo}
  59.             </div>
  60.           </Loading>
  61.           <div style={{marginTop: 10}}>
  62.             <Button onClick={this.refreshFoo2}>请求获取 foo2 新数据</Button>
  63.           </div>
  64.         </div>
  65.         <h3>当前页面是否有模块正在加载：{this.props.bindingData.__loading ? '是' : '否'}</h3>
  66.       </div>
  67.     );
  68.   }
  69. }
  71. ReactDOM.render((
  72.   <App />
  73. ), mountNode);

接口不符合规范

通过 responseFormatter 格式化接口返回数据，适配跟 DataBinder 接口规范不一致的情况。假设业务实际接口格式如下：json{ &#34;code&#34;: 0, &#34;msg&#34;: &#34;OK&#34;, &#34;content&#34;: { &#34;foo&#34;: &#34;&#34; }}

DataBinder 数据交互方案 - 图4

查看源码在线预览

  1. import React, {Component} from 'react';
  2. import ReactDOM from 'react-dom';
  3. import DataBinder from '@icedesign/data-binder';
  4. import { Button, Loading } from '@alifd/next';
  6. @DataBinder({
  7.   fooData: {
  8.     url: 'https://www.easy-mock.com/mock/5cc669767a9a541c744c9be7/databinder/custom',
  9.     responseFormatter: (responseHandler, body, response) => {
  10.       // 拿到接口返回的 res 数据，做一些格式转换处理，使其符合 DataBinder 的要求
  11.       const newBody = {
  12.         status: body.code === '1' ? 'SUCCESS' : 'ERROR',
  13.         message: body.msg,
  14.         data: body.content
  15.       };
  16.       responseHandler(newBody, response);
  17.     },
  18.     defaultBindingData: {
  19.       foo: 'bar'
  20.     }
  21.   }
  22. })
  23. class App extends Component {
  24.   refreshFoo = () => {
  25.     this.props.updateBindingData('fooData');
  26.   };
  28.   render() {
  29.     const {fooData} = this.props.bindingData;
  30.     return (
  31.       <div>
  32.         <Loading visible={fooData.__loading}>
  33.           foo 的值： {fooData.foo}
  34.         </Loading>
  35.         <div style={{marginTop: 10}}>
  36.           <Button onClick={this.refreshFoo}>请求获取新数据</Button>
  37.         </div>
  38.       </div>
  39.     );
  40.   }
  41. }
  43. ReactDOM.render((
  44.   <App />
  45. ), mountNode);

自定义请求 callback

自定义请求成功或者失败的处理逻辑：比如接口成功不弹出 toast

DataBinder 数据交互方案 - 图5

查看源码在线预览

  1. import React, {Component} from 'react';
  2. import ReactDOM from 'react-dom';
  3. import DataBinder from '@icedesign/data-binder';
  4. import { Button, Loading, Message } from '@alifd/next';
  6. @DataBinder({
  7.   fooData: {
  8.     url: 'https://www.easy-mock.com/mock/5cc669767a9a541c744c9be7/databinder/success',
  9.     success: (body, defaultCallback, originResponse) => {
  10.       if (body.status !== 'SUCCESS') {
  11.         // 后端返回的状态码错误
  12.         Message.error(body.message);
  13.       } else {
  14.         // // 成功不弹 toast，可以什么都不走
  15.         console.log('success');
  16.       }
  17.     },
  18.     // error 有两类错误，一类是网络中断，请求没有发送成功；另一类是服务器接口报错
  19.     error: (originResponse, defaultCallback, err) => {
  20.       // 失败弹 toast
  21.       Message.error(err.message);
  22.     },
  23.     defaultBindingData: {
  24.       foo: '默认值'
  25.     }
  26.   }
  27. })
  28. class App extends Component {
  29.   refreshFoo = () => {
  30.     this.props.updateBindingData('fooData', {
  31.       params: {
  32.         bar: 'foo'
  33.       }
  34.     });
  35.   };
  37.   render() {
  38.     const {fooData} = this.props.bindingData;
  40.     return (
  41.       <div>
  42.         <Loading visible={fooData.__loading} shape="fusion-reactor">
  43.           <div>
  44.             foo1 的值： {fooData.foo}
  45.           </div>
  46.         </Loading>
  47.         <div style={{marginTop: 10}}>
  48.           <Button onClick={this.refreshFoo}>请求获取新数据</Button>
  49.         </div>
  50.       </div>
  51.     );
  52.   }
  53. }
  55. ReactDOM.render((
  56.   <App />
  57. ), mountNode);

自定义请求客户端

本 Demo 演示自定义 requestClient：使用 jsonp 的方法发送请求，自定义的 requestClien 必须返回一个 Promise

DataBinder 数据交互方案 - 图6

查看源码在线预览

  1. import React, {Component} from 'react';
  2. import ReactDOM from 'react-dom';
  3. import querystring from 'querystring';
  4. import DataBinder from '@icedesign/data-binder';
  5. import jsonp from 'jsonp';
  6. import { Button, Loading } from '@alifd/next';
  8. /**
  9.  * 自定义的 json request client
  10.  */
  11. function request(opts) {
  12.   return new Promise((resolve, reject) => {
  13.     jsonp(opts.url + '?' + querystring.encode(opts.params), {
  14.       name: 'callback'
  15.     }, (err, data) => {
  16.       if (err) {
  17.         reject(err);
  18.       } else {
  19.         resolve({ data });
  20.       }
  21.     })
  22.   });
  23. }
  25. @DataBinder({
  26.   fooData: {
  27.     url: 'https://sug.so.360.cn/suggest',
  28.     defaultBindingData: {
  29.       q: '默认值'
  30.     },
  31.     responseFormatter: (responseHandler, body, response) => {
  32.       const newBody = {
  33.         success: 'SUCCESS',
  34.         message: 'ok',
  35.         data: body
  36.       };
  37.       responseHandler(newBody, response);
  38.     },
  39.   }
  40. }, { requestClient: request })
  41. class App extends Component {
  42.   refreshFoo = () => {
  43.     this.props.updateBindingData('fooData', {
  44.       params: {
  45.         word: 'test'
  46.       }
  47.     });
  48.   };
  50.   render() {
  51.     const {fooData} = this.props.bindingData;
  53.     return (
  54.       <div>
  55.         <Loading visible={fooData.__loading}>
  56.           foo 的值： {fooData.q}
  57.         </Loading>
  58.         <div style={{marginTop: 10}}>
  59.           <Button onClick={this.refreshFoo}>请求获取新数据</Button>
  60.         </div>
  61.       </div>
  62.     );
  63.   }
  64. }
  66. ReactDOM.render((
  67.   <App />
  68. ), mountNode);

自定义 DataBinder

很多场景下，我们会遇到诸如以下 case：- 业务接口规范跟 DataBinder 默认规范不一致- 需要全局处理接口通用规范，比如：未登录、无权限、出错等- 业务上使用非 AJAX 的方式做前后端通信，比如：jsonp这些场景我们建议业务上对 DataBinder 包装一层，产出业务自身的一个 DataBinder。

DataBinder 数据交互方案 - 图7

查看源码在线预览

  1. import React, { Component } from 'react';
  2. import ReactDOM from 'react-dom';
  3. import DataBinder from '@icedesign/data-binder';
  4. import { Button, Loading, Message } from '@alifd/next';
  6. /**
  7.  * 自定义一个 DataBinder，建议放在 src/components/DataBinder 下。支持以下特性：
  8.  *   - 通过 showSuccessToast/showErrorToast 配置是否要弹 toast
  9.  *   - 通过 responseFormatter 格式化后端接口
  10.  *   - 基于 responseFormatter 实现未登录、无权限等逻辑
  11.  */
  12. const CustomDataBinder = (options) => {
  13.   // 重组 options
  14.   let newOptions = {};
  16.   Object.keys(options).forEach(dataSourceKey => {
  17.     const config = options[dataSourceKey];
  18.     const { showErrorToast = true, showSuccessToast = false } = config;
  20.     newOptions[dataSourceKey] = {
  21.       ...config,
  22.       responseFormatter: (responseHandler, body, response) => {
  23.         if (body.code === '-1') {
  24.           // 未登录
  25.           Message.error('未登录，即将跳转到登录页面');
  26.           // location.reload();
  27.           return;
  28.         }
  30.         if (body.code === '-2') {
  31.           // 无权限
  32.           Message.error('无权限，即将跳转无权限页面');
  33.           // location.reload();
  34.           return;
  35.         }
  37.         const newBody = {
  38.           status: body.code === '0' ? 'SUCCESS' : 'ERROR',
  39.           message: body.msg,
  40.           data: body.content || {}
  41.         };
  42.         responseHandler(newBody, response);
  43.       },
  44.       success: (body, defaultCallback, originResponse) => {
  45.         const {config} = originResponse;
  47.         if (body.status !== 'SUCCESS') {
  48.           // 后端返回的状态码错误
  49.           if (config.showErrorToast) {
  50.             Message.error(body.message);
  51.           }
  52.         } else {
  53.           if (config.showSuccessToast) {
  54.             Message.success(body.message);
  55.           }
  56.         }
  57.       },
  58.       error: (originResponse, defaultCallback, err) => {
  59.         // 网络异常：404，302 等
  60.         const {config} = originResponse;
  61.         if (config.showErrorToast) {
  62.           Message.error(err.message);
  63.         }
  64.       }
  65.     };
  66.   });
  68.   return DataBinder.call(this, newOptions);
  69. };
  71. @CustomDataBinder({
  72.   successData: {
  73.     url:
  74.       'https://www.easy-mock.com/mock/5cc669767a9a541c744c9be7/databinder/ok',
  75.     showSuccessToast: false
  76.   },
  77.   errorData: {
  78.     url:
  79.       'https://www.easy-mock.com/mock/5cc669767a9a541c744c9be7/databinder/error',
  80.     showErrorToast: true
  81.   },
  82.   networkErrorData: {
  83.     url:
  84.       'https://www.easy-mock.com/mock/5cc669767a9a541c744c9be7/databinder/errorssss',
  85.     showErrorToast: false
  86.   },
  87.   notLogin: {
  88.     url:
  89.       'https://www.easy-mock.com/mock/5cc669767a9a541c744c9be7/databinder/not-login'
  90.   },
  91.   noAuth: {
  92.     url:
  93.       'https://www.easy-mock.com/mock/5cc669767a9a541c744c9be7/databinder/no-auth'
  94.   }
  95. })
  96. class App extends Component {
  97.   updateData = key => {
  98.     this.props.updateBindingData(key);
  99.   };
  101.   render() {
  102.     const { successData, errorData, notLogin, noAuth, networkErrorData } = this.props.bindingData;
  104.     const itemStyle = {
  105.       margin: '10px 0',
  106.       boderBottom: '1px solid #999',
  107.     };
  109.     return (
  110.       <div>
  111.         <div style={itemStyle}>
  112.           <div>请求成功不弹 toast</div>
  113.           <Loading visible={successData.__loading}>
  114.             foo 的值： {successData.foo}
  115.           </Loading>
  116.           <div style={{ marginTop: 10 }}>
  117.             <Button onClick={this.updateData.bind(this, 'successData')}>
  118.               获取新数据
  119.             </Button>
  120.           </div>
  121.         </div>
  122.         <div style={itemStyle}>
  123.           <div>请求失败弹 toast</div>
  124.           <Loading visible={errorData.__loading}>
  125.             Error： {errorData.__error && errorData.__error.message}
  126.           </Loading>
  127.           <div style={{ marginTop: 10 }}>
  128.             <Button onClick={this.updateData.bind(this, 'errorData')}>
  129.               获取新数据
  130.             </Button>
  131.           </div>
  132.         </div>
  133.         <div style={itemStyle}>
  134.           <div>请求失败不弹 toast</div>
  135.           <Loading visible={networkErrorData.__loading}>
  136.             Error： {networkErrorData.__error && networkErrorData.__error.message}
  137.           </Loading>
  138.           <div style={{ marginTop: 10 }}>
  139.             <Button onClick={this.updateData.bind(this, 'networkErrorData')}>
  140.               获取新数据
  141.             </Button>
  142.           </div>
  143.         </div>
  144.         <div style={itemStyle}>
  145.           <div>请求未登录</div>
  146.           <Loading visible={notLogin.__loading}>
  147.             foo 的值： {notLogin.foo}
  148.           </Loading>
  149.           <div style={{ marginTop: 10 }}>
  150.             <Button onClick={this.updateData.bind(this, 'notLogin')}>
  151.               获取新数据
  152.             </Button>
  153.           </div>
  154.         </div>
  155.         <div style={itemStyle}>
  156.           <div>请求无权限</div>
  157.           <Loading visible={noAuth.__loading}>foo 的值： {noAuth.foo}</Loading>
  158.           <div style={{ marginTop: 10 }}>
  159.             <Button onClick={this.updateData.bind(this, 'noAuth')}>
  160.               获取新数据
  161.             </Button>
  162.           </div>
  163.         </div>
  164.       </div>
  165.     );
  166.   }
  167. }
  169. ReactDOM.render(<App />, mountNode);

相关区块

DataBinder 数据交互方案 - 图8

暂无相关区块