ant design pro 中与服务器的交互

2019-10-20 张宇童 学习日志

第一步:首先要设置好代理

屏幕快照 2019-10-20 下午1.42.11.png

第二步:编写接口

屏幕快照 2019-10-20 下午1.43.34.png

第三步:编写effect里面的方法

20190217142242567.png

import { testApi, userApi } from '@/services/api';//testApi就是2步骤里的请求名称

export default {
    namespace: 'testM',//要唯一

    state: {
        list: [],//后台返回的数据存储在该list中,名字想怎么起怎么起
        result: {},//这个是我为了存储后台返回来的json
    },

    effects: {
        * listAPP({ payload }, { call, put }) {//这个是界面调取接口的名称
            const response = yield call(testApi, payload);//这个testApi就是刚才引入的
            yield put({
                type: 'queryList',//通过调用这个把返回数据传给list,result
                payload: response,
            });
        },
        * dealWith({ payload }, { call, put }) {
            const response = yield call(userApi, payload);
            yield put({
                type: 'deal',
                payload: response,
            });
        },
        // 清除
        * clear(_, { put }) {
            yield put({
                type: 'clean',
            });
        },
    },

    reducers: {
        queryList(state, action) {
            return {
                ...state,
                list: action.payload,//啦啦啦,这就拿到数据啦
            };
        },
        deal(state, action) {
            return {
                ...state,
                result: action.payload,
            };
        },
        clean(state) {
            return {
                result: {},
            };
        },
    }
};

屏幕快照 2019-10-20 下午1.52.02.png


标签: javascript ant antdesignpro

发表评论:

Powered by emlog