ant design pro 与服务器交互逻辑链

ant design pro 与服务器交互逻辑链

1. UI 组件交互操作；
2. 调用 model 的 effect；
3. 调用统一管理的 service 请求函数；
4. 使用封装的 request.ts 发送请求；
5. 获取服务端返回；
6. 然后调用 reducer 改变 state；
7. 更新 model。

官网对于 adp 与服务器交互过程十分简易，跟着几个文件看了好几遍，才从中找出对应的规律，也对实现思路以及原因有了一定的概念，在此记录一下

示例获取

adp 自身不带复杂的示例，需要通过

npm run fetch:block

进行额外的下载

举例用例

使用src/pages/profile/Basic进行举例说明，后续文件如未特别指出默认为该目录下的文件。

为什么选这个文件呢？因为这个页面看下来是最简单的。

网页文件

mock.ts
data.d.ts
index.tsx
service.ts
style.less
model.ts

data.d.ts

export interface BasicGood {
  id: string;
  name?: string;
  barcode?: string;
  price?: string;
  num?: string | number;
  amount?: string | number;
}
export interface BasicProgress {
  key: string;
  time: string;
  rate: string;
  status: string;
  operator: string;
  cost: string;
}
export interface BasicProfileDataType {
  basicGoods: BasicGood[];
  basicProgress: BasicProgress[];
}

结构体，定义了一些类型，可以预见，在其他文件中一定会进行使用。

mock.ts：

模拟服务器返回文件，在前端进行开发时，不用对接服务器程序，在mock中写出对应的请求信息，可以进行拦截并返回测试数据，让前后端可以进行分离开发，在进行部署时，mock文件的功能将被服务器进行代替。

//mock.ts 回复消息模拟代码
export default {
  'GET  /api/profile/basic': getProfileBasicData,
};

//service.ts 消息请求代码
export async function queryBasicProfile() {
  return request('/api/profile/basic');
}

可以明显看出，请求的信息/api/profile/basic在 mock.ts 与 service.ts 已遥相呼应。

getProfilebasicData 中的内容将模拟成服务器信息作用至网页上，具体信息不进行列出。

service.ts

export async function queryBasicProfile() {
  return request('/api/profile/basic');
}

客户端发送信息至服务器的协议前缀，profile中未携带额外的参数

//account/center/service.ts 中就有携带参数的写法
export async function queryCurrent() {
  return request('/api/currentUser');
}

export async function queryFakeList(params: { count: number }) {
  return request('/api/fake_list', {
    params,
  });
}

回到 profile/basic/service.ts 我们在此处定义了一个 queryBasicProfile函数，那么就需知道在何处会进行调用。

model.ts

...
  effects: {
    *fetchBasic(_, { call, put }) {