react接收后端文件_react对接口-获取数据篇

基于antd的后台管理系统数据接口对接

一、在src目录下创建的api.js文件，里面写你需要对的接口，api文件名取名最好规范一点

import { stringify } from 'qs';//这里都是固定的

import request from '../utils/request';//这里都是固定的

// 接口调用

// 更新

export async function upCategorySet(params) {

return request(`/api/user/city/CategorySet/update`, {

method: 'PUT',

body: params,

});

}

// 添加

export async function addCategorySet(params) {

return request(`/api/user/city/CategorySet/store`, {

method: 'POST',

body: params,

});

}

// 获取数据

export async function getRecordList(params) {

return request(`/api/user/marketAction/getRecordList?${stringify(params)}`, {

method: 'GET',

});

}

// 获取数据

export async function getRecordList(params) {

return request(`/api/user/marketAction/getRecordList?${stringify(params)}`);

}

// 删除

export async function delCategorySet(params) {

return request(`/api/user/city/CategorySet/destroy`, {

method: 'DELETE',

body: params,

});

}

复制代码

以上是调接口的方式，默认情况下是get请求,get请求可以直接写接口，因为$后面是发送请求携带的参数。

二、在models层下面创建一个文件夹，文件夹下面创建一个.js文件，如cityInformation/cityInformation,其实取名也是有规范的。

import { message } from 'antd';

import {

getRecordList,

delCategorySet,

} from '../../services/cityInformation'; //cityInformation就是api文件，{}里面的内容就是接口名

export default {

namespace: 'cityInformation',//命名空间，与文件名最好一直，方便其他地方直接调用

state: { // 初始数据

msg: null,

data: {},

},

// 一定要有一个effects还有一个reducers

// effects里面放接口

// reducers里面放接口返回的数据

effects: {

*getRecordList({ payload }, { call, put }) {//*后面的名字与call的第一个参数一致，这里可以说就