第一步:在utils 文件夹下新建 request.js 文件
/*
* @Author: wudongxue
* @Date: 2019-12-24
* @Last Modified by: wudongxue
* @Last Modified time: 2019-12-24
*/
// 本文件用于初始化网络请求,无需更改 axios的配置以及拦截器
import axios from 'axios';
import { message } from 'antd';
const baseApi = 'http://rap2api.taobao.org/app/mock/240246'; //默认路径,这里也可以使用env来判断环境
//使用create方法创建axios实例
const service = axios.create({
baseURL: baseApi,
timeout: 60000, // 请求超时时间
responseType: "json",
headers: {}
});
// request拦截器 interceptors拦截器
service.interceptors.request.use(
config => {
if (config.url.indexOf("/app/mock") > 0) { //config.url 获取请求的地址
config.headers = { "Content-Type": "application/json;charset=UTF-8" };
}
return config;
},
error => { // 处理请求错误
return Promise.reject(error);
}
);
// respone拦截器
service.interceptors.response.use(
response => {
const result = response.data;
// 业务失败,需要跳转到404页面
if ((result.code !== "0" && result.code !== 0) && (result.state !== "200" && result.state !== 200) && (result.statusCode !== "200" && result.statusCode !== 200) && (result.code !== "200" && result.code !== 200) && (result.status !== "200" && result.status !== 200) && (result.code !== "2000" && result.code !== 2000)) {
message.error(result.msg ? result.msg : result.message);
return Promise.resolve(result);
}
return response;
},
error => {
console.log('TCL: error', error)
const msg = error.Message !== undefined ? error.Message : ''
message.error(`网络连接失败 ${msg}`);
return Promise.reject(error)
}
);
export default service;
在各组件中进行使用:
// 动态获取mock数据
getData = () => {
let _this = this;
request.post(apis.getDataSource, {
page: this.params.page,
pageSize: this.params.pageSize
}).then((res) => {
let data = res.data
if (data.code === 0) {
data.data.list.map((item, index) => {
return item.key = index;
})
this.setState({
dataSource2: data.data.list,
selectedRowKeys: [], // 初始化以后 把selectedRowKeys selectedRows 重置一下 否则他还会把这个状态 带到表格里面去
selectedRows: null,
pagination: Utils.pagination(res, (page, pageSize) => {
_this.params.page = page;
_this.params.pageSize = pageSize;
this.getData();
})
})
}
}).catch(err => {
console.log(err);
})
}