dispatch callback ant design pro 网络请求回调函数

index.jsx

代码解析：在组件初次渲染时调用 model 中 命名空间为  a_models  的 getData 网络请求，传了一个patload 参数和 callback 回调函数过去，然后通过 this.setState ()更新视图的 state。

import { Form, Tabs,Affix, Button,Input,Table    } from 'antd';
import React, { Component } from 'react';
import {connect} from 'dva';
import classNames from 'classnames';

@connect(({ loading, a_models }) => ({
  a_models
}))
class Nwdayserver extends Component {
  
  // 设置默认的页面数据
  state = {
      dMsg:0,
      yMsg:0
  };

  // 页面初次渲染函数
  componentDidMount(){
    const { dispatch } = this.props;
    dispatch({
      //model的动作路径
      type:'a_models/getData',
      
      //传递给接口的数据
      payload:{
        test:1
      },
      callback:(res)=>{
        //得到网络请求的结果更新视图
        this.setState({
          ...res
        });

        console.log('e_models/s_list-网络请求得到的值：', res)
        console.log('e_models/s_list-view中设置的state的值', this.state)
        // console.log('e_models/s_list-Reducer --Action 处理器的值：', this.props.a_models)
      }
    });
  };

  render() {
    return (
      <div>{this.state.dMsg}</div>
    )
  }
}
export default Nwdayserver;

model a_models.js 代码：

import { getData } from '@/services/api';

const Model = {
  namespace: 'a_models',//唯一命名
  state: {
    visitData: 'visitData',
  },//model 的默认值
  effects: {
    *getData({ payload ,callback}, { call, put }) {
       const response = yield call(getData);
       if (callback && typeof callback === 'function') {
          callback(response)
       }
       console.log('执行了 model 中的 getData,response为',response)
        yield put({
          type: 'save',//type的value是在reducers中的函数名字
          payload: response,//response为接口返回对象
        });
     }
  },
  reducers: {
    save(state, { payload }) {
      return { ...state, ...payload};
    },
  },
};
export default Model;

service api.js文件代码

import { stringify } from 'qs';
import request from '@/utils/request';

export async function getData(params) {
  return {dMsg:110,yMsg:220};

  return request('https://jayjing.wan/11.php',{
    method: 'POST',
    data: {
      ...params,
      method: 'POST',
    },
  });
}

运行结果：