DataSet 入门

上一章介绍 DataSet 是抽象的数据源仓库，类似于后端数据库中表的概念。

DataSet 中具有专门抽象 API 的相关体系，使用它并不需要针对现有的后端体系进行大幅改造，只需要针对后端接口，进行对应的编码即可。

本章结合接口数据，带大家创建一个简单的 DataSet 对象。

接口数据

后端有一套类似这样的数据结构，返回以下数据：

sqh2XF.png

被托管在了这样一个接口地址上

mock 接口地址

sqhH1K.png

DataSet 构造

分析接口信息，如果我们需要构建 DataSet 进行数据管理及使用 Pro 组件，可以这样写：

  1. import { DataSet } from 'choerodon-ui/pro';
  2. const userDS = new DataSet({
  3.     // 指定 DataSet 初始化后自动查询
  4.     autoQuery: true,
  5.     // 请求分页大小
  6.     pageSize: 8,
  7.     // 主键字段名，一般用作级联行表的查询字段
  8.     primaryKey: 'id',
  9.     // 对应后端接口，自动生成约定的 submitUrl, queryUrl...
  10.     name: 'user',
  11.     // 数据对象名，默认值 'rows'
  12.     dataKey: 'content',
  13.     // DataSet 中包含的字段，对应上述后端数据中每条记录中的字段
  14.     fields: [
  15.         { name: 'id', type: 'number' },
  16.         { name: 'name', type: 'string', label: '姓名' },
  17.         { name: 'code', type: 'string', label: '编码' },
  18.         { name: 'sex', type: 'string', label: '性别', lookupUrl: 'https://www.fastmock.site/mock/423302b318dd24f1712751d9bfc1cbbc/mock/EMPLOYEE_GENDER' },
  19.         { name: 'active', label: '状态', type: 'boolean' },
  20.     ],
  21.     // 接口自定义配置
  22.     transport: {
  23.         // 查询请求的 axios 配置或 url 字符串
  24.         read: {
  25.             url: 'https://www.fastmock.site/mock/423302b318dd24f1712751d9bfc1cbbc/mock/guide/user',
  26.             method: 'GET',
  27.         }
  28.     },
  29.     // DS 事件回调
  30.     events: {
  31.         load: ({ dataSet }) => {
  32.             console.log('加载完成', dataSet)
  33.         }
  34.     }
  35. })

这样我们就创建好了一个基本的 DataSet 对象，以下对其配置中重点属性做解释说明。

更多配置 API 文档，参考 DataSet。

fields

fields，顾名思义，是类似于后端 SQL 数据表中的字段属性。这里负责的是将后端传回的数据收集进入 DataSet 中，将其变成 DataSet 可以监听到的数据。

fields 会是一个数组，因为一个接口的字段总是能对应多个的。内部的 name 负责标明需要收集并转换的字段名（对象中的 key），而 type 负责的是将收集到的信息进行对应的类型转换。

这样处理过的 DataSet（new 实例化后），就会将所有的后端数据对应转换成 DataSet 中存储的字段对象，同时利用观察者模式做到了视图与数据的同步更新。

transport

transport这个属性用于处理自定义接口，DataSet 为 RESTful 场景事先准备了 CRUD 方法，上例我们用到的是 read 方法，即读取方法，查询数据接口。

每个 transport 内部的方法均接收一个 AxiosConfig，这里我们用到的是 url 和 method。在接下来的章节中我们会详细介绍transport。

events

events是 DataSet 在完成一些操作后会调用的回调函数，例如 update 方法就会在 record 对象值更新后调用，这里我们观察的事件是 load - 数据加载完后事件。那么会在 read 方法执行完毕，并返回数据后触发，这里我们使用 console.log 打印加载完成，实际开发场景就可以在此事件中提前处理返回的数据，操作 DataSet 对象。

下一章节我们会利用本章创建的 DataSet 体验一下 Pro 开发 —— 最简 Table 实现。