说明

这是一个数据代理扩展，灵感来至于 ExtJs 中的 Ext.data.Store

更新日志

[2.0.1] - 2025-02-09

优化

• 经典代理所有请求数据方法都会返回Promise对象

• 新增 setParams 方法

优化

• 经典代理所有请求方法都会返回Promise对象

[2.0.0] - 2024-12-25

重构

• 基于工厂代理模式重构代码

[1.2.8] - 2024-12-24

修复

• 找回被遗忘的local代理

[1.2.7] - 2024-09-27

优化

• 所有代理都可以使用 loadNext

[1.2.6] - 2024-07-15

新增

• 经典代理新增 loadPageByParams 方法

[1.2.5] - 2024-05-15

优化

• 修复排序、加载函数参数不存在导致错误 bug

新增

• 内存代理新增 changeSort、removeItemByIndex 方法

[1.2.4] - 2023-05-10

优化

• 修复移动端代理在处理空数据时状态错误 bug

新增

• proxy 对象中新增 maxPage（最大页码）
• 内存代理新增 loadData、pushData、filter、remove、removeByIds、removeAll、getAllData 方法

[1.2.3] - 2022-06-08

变更

• loadSuccess 回调变更为 success

• refresh 方法只支持编辑/删除操作，并变更参数

优化

• 内存代理增强，新增自定义过滤方法

• 新增 end 回调

[1.2.2] - 2022-04-15

变更

• 放弃 ts 改用传统 js 写法

• 调整内部方法名称

优化

• 内存代理增强，支持直接请求数据

[1.2.1] - 2021-09-16

• 修复 clearEmptyParams 配置失效 bug

[1.1.8] - 2021-09-09

• eslint 校验调整

[1.1.6] - 2021-06-18

新增

• promise. 开头代理新增 beforLoad 扩展方法

[1.1.5] - 2021-06-10

变更

• promise. 开头代理clearEmpty 配置改为 clearPageParams

新增

• promise. 开头代理新增 clearPageParams 配置

[1.1.4] - 2021-06-08

变更

• lodaByDefaultParams 方法新增参数
• 变更 lodash 依赖版本

新增

• 新增 reader.otherProperty 配置
• promise. 开头代理新增 clearEmpty 配置
• 新增 appendsDefaultParamsAndLoad方法
• 新增 removeParamsAndReLoad方法
• 新增 getAllparams方法

优化

• 优化帮助类 isEmpty 方法

安装代理模块

npm install ux-data-proxy

使用

请求数据的方法与返回的数据需要遵循以下规则

1. 此帮助类只是一个代理类，具体分页、查询、排序功能函数还是需要 axios 等扩展来实现，但是因为设计时考虑了扩展性，可以自定义一些扩展来实现请求数据的功能

2. 返回数据必须是标准 json 格式数据，并且有以下字段，对应字段名称可以在 reader 配置中灵活配置，如果返回数据不标准可以用 readerTransform 函数处理成标准格式

   1. success -> 用于判断请求是否成功
   2. data -> 最终数据结果集
   3. total -> 满足当前条件的数据总数，用于分页
   4. message -> 用于请求失败消息提示

假如后端返回数据格式如下，使用 axios 请求数据并不做任何处理

1{
2  "code": 1,
3  "msg": "查询成功",
4  "data": {
5    "records": [{
6      "id": 119,
7      "name": "的鹅鹅鹅饿鹅",
8      "telephone": "18888888888"
9    }, {
10      "id": 118,
11      "name": "未命名",
12      "telephone": "18899999999"
13    }],
14    "total": 62
15  }
16}

代理中 reader 配置如下即可

1    reader: {
2      // 数据根节点

3      rootProperty: "data.data.records",

4      successProperty: "data.code",

5      totalProperty: "data.data.total",

6      messageProperty: 'data.data.msg'
7    }

promise.classic 代理实现分页查询等

vue 示例如下（vue3 写法）

全局配置

utils/data/proxy

1import proxy from 'ux-data-proxy';
2import { defaultsDeep, has, toNumber } from 'lodash';
3// 默认配置
4const defaultProxy = {
5  autoLoad: true,
6  reader: {
7    // 数据根节点名称
8    rootProperty: 'data',
9    // 判断请求是否成功的节点名称
10    successProperty: 'success',
11    // 数据总数节点名称
12    totalProperty: 'total',
13    // 请求失败后失败消息节点名称
14    messageProperty: 'msg'
15  },
16  limitParam: 'size',
17  pageParam: 'current',
18  // 后端返回数据格式不是我们想要的，在这里处理下
19  readerTransform(data) {
20    if (data.data) {
21      const res = data.data;
22      if (has(res, 'records')) {
23        data.data = res.records || [];
24        data.total = toNumber(res.total);
25      }
26    }
27    return data;
28  }
29};
30// 扩展数据请求代理
31export default {
32  /**
33   * 初始化
34   *
35   * @param {*} store,数据源对象
36   */
37  init(store) {
38    defaultsDeep(store.proxy, defaultProxy);
39    proxy.init(store);
40  }
41};

组合式 api

1import proxy from '@/utils/data/proxy';
2import { assignIn, map, get, set, toNumber, toString, unset } from 'lodash';
3import { clearObject, isEmpty, checkCondition } from '@/utils';
4
5export function compositionTableData({ transformParams, exportFun, idKey, ...config } = {}) {
6  // 数据代理
7  const dataStore = reactive({
8    // 可选分页页码集合
9    pageSizes: [10, 20, 40, 60, 80, 100],
10    // 当前已选数据，需手动调用 updateSelection 方法
11    selection: [],
12    // 必须配置否则无法展示数据
13    data: [],
14    // 必须配置否则无法实时展示请求状态
15    isLoading: false,
16    /**
17     * 代理配置，用于加载数据
18     * 用法参考 https://www.npmjs.com/package/ux-data-proxy
19     * 常用配置
20     * autoLoad(boole) 初始化后是否自动加载数据
21     * disposeItem(function(item){item.a='123'}) 处理单个数据对象的函数
22     * defaultParams(object) 默认参数,默认参数会被相同名称新参数覆盖，此参数传递到请求数据函数
23     */
24    proxy: {
25      defaultParams: {}
26    }
27  });
28
29  // 设置代理配置
30  assignIn(dataStore, config);
31  // 初始化数据代理
32  proxy.init(dataStore);
33
34  const getParams = (params) => {
35    return transformParams ? transformParams(params) : params;
36  };
37
38  dataStore.transformParams = getParams;
39
40  dataStore.loadByParams = (params) => {
41    dataStore.load(getParams(params));
42  };
43
44  /**
45   * 本地过滤数据源数据(promise.memory专用方法)
46   *
47   * @param {Object} params - 参数
48   * @param {Object} options - 查询配置。
49   */
50  dataStore.filterByParams = (params = {}, options = {}) => {
51    params = clearObject(params);
52    // 断言条件集合
53    const predicat = [];
54    // eslint-disable-next-line no-unused-vars
55    for (const key in params) {
56      const type = options[key];
57      const value = get(params, key);
58      if (!isEmpty(value) && type) {
59        switch (type) {
60          case 'int':
61            // 将查询值转换为int类型
62            set(params, key, toNumber(value));
63            break;
64          case 'string':
65            // 将查询值转换为string类型
66            set(params, key, toString(value));
67            break;
68          case 'time':
69            {
70              // 按时间范围进行查询
71              const [start, end] = value;
72              const fun = (data) => {
73                const time = get(data, key);
74                return time >= start && time <= end;
75              };
76              predicat.push(fun);
77              unset(params, key);
78            }
79            break;
80          case 'regex':
81            {
82              // 模糊匹配查询
83              const reg = new RegExp(value);
84              const fun = (data) => reg.test(get(data, key));
85              predicat.push(fun);
86              unset(params, key);
87            }
88            break;
89          default:
90            break;
91        }
92      }
93    }
94    predicat.push(params);
95    // console.log('predicat',predicat)
96    dataStore.filter((item) => checkCondition(item, predicat));
97  };
98
99  /**
100   * 动态设置序号
101   *
102   * @param {number} i - 当前页序号
103   * @return {number} 新的序号
104   */
105  dataStore.computeIndex = (i) => {
106    return i + 1 + dataStore.proxy.pageSize * (dataStore.proxy.page - 1);
107  };
108
109  /**
110   * 导出文件，需配置 exportFun (可按需修改)
111   *
112   * @param {string} fileName - 导出文件名称
113   * @param {object} params - 导出参数（默认情况下会使用当前查询条件作为参数）
114   */
115  dataStore.exportFile = ({ joinString = ',' } = {}) => {
116    const params = dataStore.getParams() || {};
117    const { ids } = dataStore.getSelectionData({ iteratee: idKey, joinString });
118    params.ids = ids;
119    exportFun(params);
120  };
121
122  /**
123   * 更新当前已选数据
124   *
125   * @param {type} selection - 已选数据
126   */
127  dataStore.updateSelection = (selection) => {
128    dataStore.selection = selection;
129  };
130
131  /**
132   * 获取当前已选数据(转换后，可按需修改)
133   *
134   * @param {Object} options - 配置
135   * @param {string} [options.iteratee='id'] - lodash.map的iteratee
136   * @param {string} options.joinString - 如果有值，则将结果拼接成字符串
137   * @return {Object} 包含ids和长度的对象。
138   */
139  dataStore.getSelectionData = ({ iteratee = 'id', joinString } = {}) => {
140    let ids = [];
141    if (dataStore.selection.length) {
142      // 转换数据
143      ids = map(dataStore.selection, iteratee);
144    }
145    const length = ids.length;
146    if (joinString) {
147      // 转换为字符串
148      ids = ids.join(joinString);
149    }
150    return { ids, length };
151  };
152
153  /**
154   * 对数据源进行排序（可按需修改）
155   *
156   * @param {Object} sortOptions - 排序选项。
157   * @param {string} sortOptions.prop - 需要排序的字段
158   * @param {string} sortOptions.order - 排序配置
159   */
160  dataStore.sortBy = ({ prop, order }) => {
161    let params;
162    if (order) {
163      params = { field: `${prop} ${order == 'ascending' ? 'asc' : 'desc'}` };
164    }
165    dataStore.sort(params);
166  };
167
168  return dataStore;
169}

1<template>
2  <div>
3    <div>
4      <!--省略查询html代码-->
5    </div>
6    <el-table: data="tableList.data">
7      <!--省略代码-->
8      </el-table>
9      <el-pagination @size - change="onSizeChange" @current - change="onCurrentChange" : current - page="tableList.proxy.page" : page - sizes="[5, 10, 20 ,30]" : page - size="tableList.proxy.pageSize" : total="tableList.proxy.total" layout="total, sizes, prev, pager, next, jumper">
10      </el-pagination>
11  </div>
12</template>
13<script lang='ts'>
14  import {
15    Component,
16    Vue
17  } from "vue-property-decorator";
18  import {
19    Action
20  } from "vuex-class";
21  import proxy from "ux-data-proxy";
22  @Component({
23    name: "GridDemo"
24  })
25  export default class GridDemo extends Vue {
26    // 定义在vuex中的请求数据方法，只要返回的是Promise类型即可
27    @Action("list") gridList;
28    // 预留配置-列表配置
29    // 列表代理对象
30    tableList = {
31      // 列表数据源
32      data: [],
33      // 代理配置
34      proxy: {
35        // 请求数据方法
36        requestFun: this.gridList,
37        // 分页每页显示条数字段名称，默认为limit，此参数传递到服务端
38        limitParam: "pageSize",
39        // 分页页码字段名称，默认为page，此参数传递到服务端
40        pageParam: "current",
41        // 初始化后自动加载数据
42        autoLoad: true,
43        // autoLoad自动加载时默认参数
44        // params:{},
45        // 读取数据相关配置
46        reader: {
47          // 数据根节点
48          rootProperty: "data.data.records",
49          successProperty: "data.code",
50          totalProperty: "data.data.total",
51          messageProperty: "data.data.msg"
52        }
53      }
54    };
55
56    created() {
57      // 初始化数据代理对象
58      proxy.init(this.tableList);
59    }
60
61    // 每页显示数量变化
62    onSizeChange(pageSize: number) {
63      this.proxySizeChange(pageSize);
64    }
65
66    // 页码发生变化
67    onCurrentChange(page: number) {
68      this.proxyCurrentChange(page);
69    }
70
71    //根据条件查询
72    proxyQuery(params, tabName = "tableList") {
73      // console.log("onSizeChange", pageSize);
74      this[tabName].load(params);
75    }
76
77    //每页显示数量变化
78    proxySizeChange(pageSize: number, tabName = "tableList") {
79      // console.log("onSizeChange", pageSize);
80      this[tabName].loadPageSize(pageSize);
81    }
82
83    // 页码发生变化
84    proxyCurrentChange(page: number, tabName = "tableList") {
85      // console.log("onCurrentChange", page);
86      this[tabName].loadPage(page);
87    }
88  }
89</script>

vue 页面

注意 fetchList 需要返回 Promise 对象

1<template>
2  <div>
3    <el-table :data="dataStore.data" border @selection-change="dataStore.updateSelection">
4      <!-- 省略配置 -->
5    </el-table>
6    <el-pagination layout="total, prev, pager, next, sizes, jumper" background :current-page="dataStore.proxy.page" :page-size="dataStore.proxy.pageSize" :page-sizes="dataStore.pageSizes" :total="dataStore.proxy.total" @size-change="dataStore.loadPageSize($event)" @current-change="dataStore.loadPage($event)"></el-pagination>
7  </div>
8</template>
9
10<script setup>
11  import { compositionTableData } from '@/composition/table/Data';
12  import { fetchList } from 'api地址';
13
14  const dataStore = compositionTableData({
15    proxy: {
16      requestFun: fetchList
17    }
18  });
19</script>

可用代理

promise.classic

多用于 web 端获取列表数据，新数据会覆盖原有数据

promise.modern

多用于移动端获取列表数据，新数据会追加到原有数据之后

promise.memory

用于一次性请求数据后内存分页，用法同 promise.classic

可用配置

1// promise.开头代理预留方法
2const defaultStore = {
3  // 扩展，请求失败后执行函数(res)
4  // res 请求失败结果数据集
5  failure: null,
6  // 扩展，请求数据前处理请求参数函数(params, proxy)
7  // params 请求参数
8  // proxy 代理对象
9  writerTransform: null,
10  // 扩展，请求数据成功后处理数据结果函数(res)
11  // res 未处理的结果数据集
12  readerTransform: null
13};
14// promise.modern代理数据源对象可用状态
15const defaultStore = {
16  // 是否加载完数据，所有数据加载完成就会变成true，可以修改
17  isFinished: false,
18  // 是否加载失败，禁止修改
19  isError: false
20};
21
22// 所有代理可用配置
23const defaultProxy = {
24  // 代理类型，默认为经典代理
25  type: 'promise.classic',
26  // 默认参数,默认参数会被相同名称新参数覆盖，此参数传递到请求数据函数
27  defaultParams: null,
28  // 初始化后是否自动加载数据
29  autoLoad: false,
30  // 扩展 处理单个数据对象的函数(item,index)
31  // item 单条数据
32  // index 序号
33  disposeItem: null,
34  // 读取数据相关配置
35  reader: {
36    // 其他数据节点名称
37    otherProperty: '',
38    // 数据根节点名称
39    rootProperty: 'data',
40    // 判断请求是否成功的节点名称
41    successProperty: 'success',
42    // 数据总数节点名称
43    totalProperty: 'total',
44    // 请求失败后失败消息节点名称
45    messageProperty: 'message'
46  },
47  // 排序字段名称
48  sortParam: 'orderBy',
49  // 排序方式字段名称
50  directionParam: 'orderSort'
51};
52
53// promise.开头代理可用配置
54const defaultProxy = {
55  // 每次加载几条数据，默认为10
56  pageSize: 10,
57  // 当前页码，默认为1
58  page: 1,
59  // 数据总数，禁止更改
60  total: 0,
61  //最大页码
62  maxPage: 0,
63  // 分页每页显示条数字段名称，默认为limit，此参数传递到请求数据函数
64  limitParam: 'limit',
65  // 分页页码字段名称，默认为page，此参数传递到请求数据函数
66  pageParam: 'page',
67  // 扩展，请求数据前处理函数(proxy)
68  // proxy 代理对象
69  beforLoad: null,
70  // 扩展，请求数据成功后回调函数(data,proxy,store)
71  // data 结果输数据集
72  // proxy 代理对象
73  success: null,
74  // 扩展，请求数据结束后回调函数(store)
75  // proxy 代理对象
76  end: null,
77  // 扩展，请求失败后执行函数(store,res)
78  // res 请求失败结果数据集
79  // 此扩展会覆盖defaultStore中的配置
80  failure: null,
81  // 扩展，请求数据前处理请求参数函数(params, proxy)
82  // params 请求参数
83  // proxy 代理对象
84  // 此扩展会覆盖defaultStore中的配置
85  writerTransform: null,
86  // 扩展，请求数据成功后处理数据结果函数(res)
87  // res 未处理的结果数据集
88  // 此扩展会覆盖defaultStore中的配置
89  readerTransform: null,
90  // 发送请求时是否清除空数据
91  clearEmptyParams: true,
92  // 发送请求时是否不发送分页参数
93  clearPageParams: false
94};
95
96// promise.memory代理可用配置
97// 其他同promise.classic
98const defaultProxy = {
99  // 发送请求时是否不发送分页参数
100  clearPageParams: true
101};

可用函数

通用函数

1    /**
2     * 初始化,每个数据源对象必须初始化
3     *
4     * @param {*} store,数据源对象
5     */
6    init(store) {},
7    /**
8     * 数据源对象加载数据
9     *
10     * promise.开头的代理页码会重置为1
11     *
12     * local代理如果没有配置requestFun会根据dbName与path配置读取本地数据
13     *
14     * @param {object} params 查询参数
15     */
16    load(params) {},
17    /**
18     * 加载下一页数据
19     *
20     */
21    loadNext() {},
22    /**
23     * 数据源对象重载数据(参数不会发生变化)
24     *
25     * promise.开头的代理页码会重置为1
26     *
27     * local代理如果没有配置requestFun会根据dbName与path配置读取本地数据
28     */
29    reLoad() {},
30    /**
31     * @description  设置默认参数并加载数据
32     * @param {object} params 参数
33     * @param {boolean} isReLoad 是否重载
34     * @param {boolean} isAppends 是否追加默认参数
35     */
36    lodaByDefaultParams(params, {
37      isReLoad = false,
38      isAppends = false
39    }) {},
40    /**
41     * 移除指定参数(包括默认参数)并加载数据
42     *
43     * @param {*} list 待移除的字符串数组
44     * @param {boolean} [isReLoad=true] 是否重载
45     */
46    removeParamsAndReLoad(list, isReLoad = true) {},
47    /**
48     * 排序
49     *
50     * @param {*} { field 排序字段, order 排序方式}
51     */
52    sort({
53      field,
54      order
55    }) {},
56    /**
57     * 清除排序
58     *
59     */
60    clearSort() {},
61    /**
62     * @description  设置当前参数（排除分页、排序参数）
63     * @param {object} params 参数
64     */
65    setParams(params) {},
66    /**
67     * 获取当前参数（排除分页参数）
68     *
69     * @returns
70     */
71    getParams() {},
72    /**
73     * 获取所有参数
74     *
75     * @returns
76     */
77    getAllparams() {}

promise.classic/promise.memory 代理

1  /**
2   * 数据源对象改变每页显示条数，页码重置为1
3   *
4   * @param {number} page
5   */
6  loadPageSize(pageSize) {},
7  /**
8   * 数据源对象改变页码
9   *
10   * @param {number} page
11   */
12  loadPage(page) {},
13  /**
14   * 刷新数据源对象，用于编辑/新增/删除后调用
15   * 编辑后直接重载数据，页码不变
16   * 新增后直接重新加载数据，页码重置为1
17   * 删除后根据剩余数据总数和页面等灵活设置页码，不变或减1
18   *
19   * @param {*} [{ isDel = false 是否删除数据, isAdd = false 是否新增数据}={}]
20   */
21  /**
22   * 数据源对象改变页码和参数
23   *
24   * @param {number} page
25   *  @param {any} params
26   */
27  loadPageByParams(page, params) {},
28  refresh({
29    isDel = false,
30    isAdd = false
31  } = {}) {}

promise.memory 代理

1/**
2 * 将数据保存到内存中，然后分页处理
3 *
4 * @param {object} data - 数据
5 */
6loadData(data) {},
7  /**
8   * 将数据追加到内存代理中
9   *
10   * @param {*} data -数据
11   * @param {boolean} isReLoad - 是否是重新加载
12   */
13  pushData(data, isReLoad) {},
14  /**
15   * 通过 predicate（断言函数） 从内存数据中过滤数据
16   *
17   * @export
18   * @param {Array|Function|Object|String} predicat 断言函数
19   */
20  filter(predicat) {},
21  /**
22   * 通过 predicate（断言函数） 从内存数据中删除数据
23   *
24   * @export
25   * @param {Array|Function|Object|String} predicat 断言函数
26   */
27  remove(predicat) {},
28  /**
29   * 从内存数据中删除指定 id 数据
30   *
31   * @param {Array} ids - 要删除的 id 数组。
32   * @param {string} [key='id'] - 用于查找每个对象中 id 的键。
33   */
34  removeByIds(ids = [], key = 'id') {},
35  /**
36   * 清空所有数据
37   */
38  removeAll() {},
39  /**
40   * 更改序号
41   *
42   * @param {number} newIndex - 元素的新位置索引(当前分页)
43   * @param {number} oldIndex - 元素当前的位置索引(当前分页)
44   * @return {void}
45   */
46  changeSort(newIndex, oldIndex) {},
47
48  /**
49   * 通过索引移除数据
50   *
51   * @param {number} index - 要移除的项目的索引(当前分页)
52   * @return {void}
53   */
54  removeItemByIndex(index) {}
55/**
56 * 获取所有数据
57 */
58getAllData() {}

二次扩展

1import proxy from 'ux-data-proxy';
2import { defaultsDeep, has, toNumber } from 'lodash';
3// 默认配置
4const defaultProxy = {
5  autoLoad: true,
6  reader: {
7    // 数据根节点名称
8    rootProperty: 'data',
9    // 判断请求是否成功的节点名称
10    successProperty: 'success',
11    // 数据总数节点名称
12    totalProperty: 'total',
13    // 请求失败后失败消息节点名称
14    messageProperty: 'msg'
15  },
16  limitParam: 'size',
17  pageParam: 'current',
18  // 后端返回数据格式不是我们想要的，在这里处理下
19  readerTransform(data) {
20    if (data.data) {
21      const res = data.data;
22      if (has(res, 'records')) {
23        data.data = res.records || [];
24        data.total = toNumber(res.total);
25      }
26    }
27    return data;
28  }
29};
30// 扩展数据请求代理
31export default {
32  /**
33   * 初始化
34   *
35   * @param {*} store,数据源对象
36   */
37  init(store) {
38    defaultsDeep(store.proxy, defaultProxy);
39    proxy.init(store);
40  }
41};

设计思路

时序图

发起流程尽量简单，代理内部将参数和数据都处理好，并提供相应配置支持使用者自行扩展

1
2sequenceDiagram
3    入口 ->> 代理 : 发起请求
4    代理 ->> 代理 : 处理参数
5    代理 ->> 代理 : 接收并处理数据
6    代理 ->>  入口: 返回

流程图

核心代理实现核心功能，核心方法相同，各个子代理按需求实现不同功能并提供专属方法，目前有三种代理可用，根据代理类型自动选择子代理。

1. promise.modern 移动端专用
2. promise.classic PC 端专用
3. promise.memory PC 端专用，在 promise.classic 基础上二次扩展，用于一次性请求所有数据后内存分页，只在调用 load 方法时才会发起请求更新数据。

1graph TD
2    BL(load)
3    BC(clearSort) --> | 清除排序 | BL
4    BS(sort) --> | 排序 | BL
5    BR(reLoad) --> | 重载 | BL
6    BLD(lodaByDefaultParams) --> | 设置默认参数并加载数据 | BL
7    BRP(removeParamsAndReLoad) --> | 移除指定参数并加载数据 | BL
8    BL --> | 初始化后 | PS
9
10    PS(promise.subLoad)
11    PL(promise.loadByProxy)
12    PS --> | 处理页码 | PL
13
14    ML(promise.modern.loadNext) --> | 下一页 | PL
15
16    CLPZ(promise.classic.loadPageSize) --> | 改变每页显示条数 | PL
17    CLP(promise.classic.loadPage) --> | 改变页码 | PL
18    CR(promise.classic.refresh) --> | 刷新数据 | CLP
19
20    PL --  memory代理 --- MEPRD(promise.memory.promiseReadData)
21    PL --> | 其他代理 | BRF(requestFun)
22
23    MEPRD --> | | MEI{是否内存分页}
24    MEI --> | 是 | BRD(readData)
25    MEI --> | 否 | BRF
26
27    BRF --> | 读取数据 | BRD
28    BRD --> | 读取数据后通用逻辑处理 | PR(promise.readDataEnd)
29
30    PR --> | memory/classic代理 | CP(promise.classic.promiseReadDataEnd)
31    PR --> | modern代理 | MP(promise.modern.promiseReadDataEnd)
32    MP --> | modern代理 | MM(promise.modern.modernLoadEnd)
33
34    BLE(loadEnd)
35    MM --> | 结束请求 | BLE
36    CP --> | 结束请求 | BLE
37
38    classDef promise fill:#f9f,stroke:#333;
39    class PS,PL,PR promise;
40
41    classDef memory fill:#00FF00,stroke:#333;
42    class MEI,MEPRD memory;
43
44    classDef classic fill:#CCFF66,stroke:#333;
45    class CP,CLPZ,CLP,CR classic;
46
47    classDef modern fill:#FFCC99,stroke:#333;
48    class MP,MM,ML modern;

文档信息