请求后端接口，我们一般使用request方法：具体写法如下：

import request from 'utils/request'; // 引入request方法
import { getCurrentOrganizationId } from 'utils/utils'; // 一般都需要引入获取租户ID的方法

const prefix = `xxxx/v1`;  // xxxx表示后端接口前缀
const organizationId = getCurrentOrganizationId();

/**
 * 列表查询示例
 *
 * @export
 * @param {*} params
 * @returns
 */
export async function queryList(params) {
  return request(`${prefix}/${organizationId}/new-engine-gearboxs`, {
    method: 'GET',  // 请求方法（GET、POST、PUT、DELETE等）
    query: params, // 拼接在请求路径后的参数(一般GET请求会用到)
    // body: yourBody  // 请求体内容（一般POST、PUT、DELETE请求会用到）
  });
}

上面的代码一般会单独放在一个文件中，然后通过export暴露出单个方法，这个文件一般会起名叫xxxService.js，文件一般会放在services目录下（这个目录与models、pages目录同级）：

在其他文件引入这个请求后端接口的方法

• 直接在定义页面的js文件中引入使用（比如我们培训时讲的List.js内）：

// List.js
import React, { useEffect } from 'react';
import { queryList } from '../../services/xxxxService';

const myList = () => {
  // 以下使用的useEffect表示组件初次加载完毕后会调用里面的方法，关于useEffect及其他的React Hook的用法可以看React官网或者其他学习资料
  useEffect(() => {
    queryList(params).then((res) => {
      // ...your code
    })
  }, []);
  // ... other code
};

• 通过dva进行状态管理，相关代码写在models文件夹下对应的某一模块（页面）的js文件中

// models/c7nDemo.js
import { queryList } from '../../services/xxxxService';

export default {
  namespace: 'c7nDemo',
  state: {
    listData: [],
  },
  effects: {
    // effects中定义的方法传入参数有两个，均是对象，我们可以通过对象的解构赋值将其获取
    // payload即使传入的参数，put和call都是dva内部的方法，put方法可以调用内部的reduces，call方法则是可以调用其它函数
    // 注意，effects里面的每个方法内部都是同步的（使用yield命令），即执行完上一条语句后才会执行下一条语句（包括网络请求等异步操作）
    *queryListData({ payload }, { put, call }) {
      // call方法传入参数为两个（待调用的函数、传入的参数）
      const listData = yield call(queryList, payload);
      // put方法传入参数为一个对象（type: 调用的reduces的名称，payload：传入的参数）
      yield put({
        type: 'updateState',
        payload: {
          listData,
        },
      });
    },
  },
  reducers: {
    updateState(state, { payload }) {
      return {
        ...state,
        ...payload,
      };
    },
  },
};

定义好models里面的文件后，我们就可以在pages目录下的文件中通过dva的connect方法引入：

// pages/List.js
import React, { useEffect } from 'react';
import { connect } from 'dva';

// 注意，现在这里就要加个props以接收connect方法注入的参数
const myList = (props) => {
  // 注入后props中便有了dispatch方法和相关数据（如下面的listData）
  
  // 进行下面操作后，props中的listData在获取到返回结果后会同步进行更新，便可以在组件中使用了
  useEffect(() => {
    // dispatch方法传入的是一个对象，有两个属性，type：对应命名空间内的对应effect方法；payload：传入的参数
    dispatch({
      type: 'c7nDemo/queryList',
      payload: xxx,
    });
  }, []);
};

// 调用connect方法，两个参数
// 第一个是一个函数，通过声明namespace引入相关model中的数据，第二个是待注入的组件函数
export default connect(({ c7nDemo }) => ({
  listData: c7nDemo.listData,
}))(MyList);

为什么要用状态管理

虽然初学时定义起来较为麻烦，但是可以在其他地方进行复用，这样子可以解决React中组件传值的问题，并且在开发中进行错误的定位与排查都会事半功倍。
更多的内容可以去dva官网学习