React入门之models请求数据

项目基本结构

一.接口 services.js ,模块 models.js ,HTML页面

三者同级

二.接口配置-services

import { get, post } from '@/utils/request';

//  get请求, 获取列表
export const getList = (params) => {
  return get(`/api/demo/list`, params);
};

// post请求,获取列表
export const postList = (params) => {
  return post(`/api/demo/list`, params);
};

三.模块配置-models

// 这里是引入接口名称.   上文
import { getList, postList } from '../services';

export default {
// 仓库名称,用于指定某个仓库
  namespace: 'demo',
  // 仓库存储数据
  state: {
    welfareList: [],
  },
  effects: {
  // 处理请求
    *getList({ payload }, { call, put }) {
    //  配置返回值,接口,参数
      const response = yield call(getList, payload);
      // upadtaState 方法用于在仓库中存储返回值
      yield put({
      //  updataState 方法在底部
        type: 'updateState',
        payload: {
        //  用于更新本仓库中state中数组的值
          welfareList: response?.data,
        },
      });
    },
    *postList({ payload }, { call }) {
      const response = yield call(postList, payload);
      直接返回后端请求数据结果结果
	  retuen response?.data
    },
  },
  reducers: {
  // 用于更新数据的方法
    updateState: (state, { payload }) => {
      return {
        ...state,
        ...payload,
      };
    },
  },
};

四、页面配置

index.js中引入单个models

app.model(require("./models/modules/global").default);

如果要引入多个models，就需要结合dva/dynamic了

dynamic({
    app,
    models: () =>
      models.filter(model => modelNotExisted(app, model)).map(m => import(`../models/${m}.js`)),
    // add routerData prop
    component: () => {}
})

import React, { useEffect } from 'react';
// 引入connect
//简单来说connect是用来连接前端的ui界面和和前端model的一个嫁接桥梁
//通过使用connect将model里面定义的state，和dispatch，和histoey方法等
//传递到前端供前端使用
import { connect } from 'umi';

const Index = (props) => {
  // 从props中取出dispatch及刚刚仓库中写的默认state的welfareList
  const { dispatch, welfareList } = props;
  // 页面加载时发送请求
  useEffect(() => {
    // 开始发送请求
    dispatch({
      // models仓库名及方法名
      type: 'demo/getList',
      // 传递的参数
      payload: { id: 1 },
    });
    // 因在model中设置了返回的数据,统一存储&更新到了state中, 所以不用通过.then()方式
    // 获取返回值
  }, []);
  // 随即打印 即可直接看到值,当state更新时,页面数据也会更新
  // console.log('welfareList',welfareList)

  return <div>小样</div>;
};

//  连接的仓库名  因 加了花括号 所以取用state中的数组 直接取的
//  否则应写  const { dispatch, demo:{ welfareList }} = props;
export default connect(({ Demo }) => {
  return Demo;
})(Index);