# 与服务端交互

# 前端请求流程

admin-antd-react 中,一个完整的前端 UI 交互到服务端处理流程是这样的:

  1. UI 组件交互操作;
  2. 调用统一管理的 model.ts Dva model;(此步可以省略,可以直接进行下步)
  3. model.ts 调用 service.ts api 请求函数;
  4. 使用封装的 @/utils/request.ts 发送请求;
  5. 获取服务端返回;
  6. 更新 data;

# request.ts

@/utils/request.ts 是基于 umi-request (opens new window) 的封装,便于统一处理 POST,GET 等请求参数,请求头,以及错误提示信息等。具体可以参看 @/utils/request.ts (opens new window)。 它封装了全局 request拦截器response拦截器统一的错误处理统一做了超时处理baseURL设置等

# 一个表单提交例子:

代码 (opens new window)

// @/pages/pagesample/form/basic/service.ts
import request from '@/utils/request';
import { formDataType } from './data.d';

export async function createData(params: formDataType): Promise<any> {
  return request('/pages/form', {
    method: 'POST',
    data: params,
  });
}

// @/pages/pagesample/form/basic/model.ts
import { Effect } from 'umi';
import { createData } from './service';

export interface StateType {}

export interface ModelType {
  namespace: string;
  state: StateType;
  effects: {
    create: Effect;
  };
  reducers: {};
}
const initState: StateType = {};

const Model: ModelType = {
  namespace: 'FormBasic',
  state: initState,
  effects: {
    *create({ payload }, { call, put }) {
      try {
        yield call(createData, payload);
        return true;
      } catch (error) {
        return false;
      }
    },
  },
  reducers: {},
};

export default Model;

// @/pages/pagesample/form/basic/index.tsx
  const onFinish = async (values: formDataType) => {
    const res: boolean = await dispatch({
      type: 'FormBasic/create',
      payload: values,
    });
    if (res === true) {
      message.success('提交成功');
      onReset();
    }
  };


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58