antd pro 服务器交互与dva

@component/services/api下 api.js 里 export 方法getGuan

export async function getGuan() {

  return request('/api/guan');

}

mock文件夹下 api.js新增接口

'GET /api/guan': (req, res) => {
    setTimeout(() => {
      res.send({
        'guan': [{
            a: '@city',
            b: 150,

          },
          {
            a: '@city',
            b: 150,

          },
          {
            a: '@city',
            b: 150,

          },
          {
            a: '@city',
            b: 150,

          }
        ],
      });
    }, 3000);
  },

新增models文件 gaun.js 引入方法getGuan并输出命名空间为‘g'的models
页面组件Guan.js 关联models ‘g’

@connect(({ g, loading }) => ({
    g,
    click: loading.effects['g/gu']
}))
class Guan extends PureComponent {

@connect要写在class之前 不然报错 - -！
Guan组件里的方法调用models发送请求

click = () => {
        const {
            dispatch,
            g
        } = this.props
        dispatch({
            type: 'g/gu',
        })
    }

post 请求需要带的参数payload

click = (fields) => {
        const {
            dispatch,
            g
        } = this.props
        dispatch({
            type: 'g/gu',
           payload: {
              desc: fields.desc
            }
        })
    }

@component/services/api下 api.js 下做对应处理

export async function getGuan(params) {
  return request('/api/getGuan', {
    method: 'POST',
    body:{
      ...params
   },
  });
}

mock下 api.js里方法改为post
models中给出方法对应请求和dva操作

import {
    getGuan,
    addGuan
} from '@/services/api'
export default {
    namespace: 'g',
    effects: {
        *gu({ payload }, {
            call,
            put
        }) {
            const response = yield call(getGuan, payload);
            response.guan.map(
                (v, i) => {
                    const j = v
                    j.id = i + 1
                    return j
                })
            yield put({
                type: 'get',
                payload: response.guan,
            });
        },
    },

    reducers: {
        get(state, action) {
            return {
                ...state,
                guan: action.payload,
            };
        },
};

其中reducer的方法get不能与effects下的gu重名 不然会陷入递归无限请求数据

*gu({ payload }, {

这里的payload是 click方法dispach带的参数payload，

yield put({
     type: 'get',
         payload: response.guan,
     });

这里的payload是用来存储服务器返回的数据 并传递给reducers下的 get方法的action
一些请求完数据后做的回调可以放在dispach中传给models处理

click = (fields) => {
        const {
            dispatch,
            g
        } = this.props
        dispatch({
            type: 'g/gu',
           payload: {
              desc: fields.desc
            }
          callback: () => {
            this.setState({
              visble: false
            });
          },
        })
    }

models里

     *gu({ payload,callback }, {
            call,
            put
        }) {
            const response = yield call(getGuan, payload);
            response.guan.map(
                (v, i) => {
                    const j = v
                    j.id = i + 1
                    return j
                })
            yield put({
                type: 'get',
                payload: response.guan,
            });
          if(callback) callback()
        },