请求封装
// ajax.js
import axios from 'axios';
import qs from 'qs'; //参数编译
let pending = []; //声明一个数组用于存储每个ajax请求的取消函数和ajax标识
let cancelToken = axios.CancelToken; //引入取消请求方法
//请求完成后取消该请求，从队列删除
let removePending = (ever) => {
for(let p in pending){
if(pending[p].u === ever.baseURL) { //当前请求在队列中存在时
pending[p].f(); //执行取消操作
pending.splice(p, 1); //把这条记录从队列中移除
}
}
}
let baseURL
//项目需要，如果是开发环境走本地ip跨域访问（前提是项目有多环境配置文件，配置有代理方法）
if (process.env.REACT_APP_ENV === 'development') {
baseURL = '/api'
} else {
//非开发环境下获取配置文件的baseurl
baseURL = process.env.REACT_APP_BASE_URL
}
//请求封装 method请求方法，全大写 params参数 url路径
export const http = (method, params, url, preventRepeat=true,uploadFile=false) => {
return new Promise((resolve, reject) => {
const instance = axios.create({
baseURL: baseURL + url,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
//可添加其他公用参数，比如token等
},
//设置超时
timeout: 50 * 1000
});
//默认阻止重复请求
if (preventRepeat) {
// request拦截器
instance.interceptors.request.use(
config => {
removePending(config);//防止双击多次触发请求
config.cancelToken = new cancelToken((c)=>{
pending.push({ u: config.baseURL, f: c });
});
return config;
},
err => {
return Promise.reject(err);
}
);
//response拦截器
instance.interceptors.response.use(
response => {
removePending(response.config);
return response;
},
error => {
return Promise.reject(error)
}
);
} else {
// 拦截器
instance.interceptors.request.use(
config => {
return config;
},
err => {
return Promise.reject(err);
}
);
instance.interceptors.response.use(
response => {
return response;
},
error => {
return Promise.reject(error)
}
);
}
// 请求(uploadFile为true表示上传文件binary类型，则参数不需要编译)
instance(
Object.assign(
{},
{method},
(method === 'POST' || method === 'PUT') ? {data: !uploadFile?qs.stringify(params):params} : {params}
)
).then(response => {
// success
if (response.data.code === 200) {
resolve(response.data);
} else {
resolve(false)
}
})
.catch(error => {
resolve(false)
});
});
}
使用
1.个人习惯，把所有api写在一个文件里，默认跟ajax.js同级目录
//api.js
import {http} from './ajax.js'
//示例，默认参数为空,特殊情况有些接口需要循环请求的，可以设置参数preventRepeat为false
//post
export const login = (params={}) => http('POST', params, '/login')
//get
export const getList = (params={}) => http('GET', params, '/list')
export const getDetail = (id,params={}) => http('GET', params, `/detail/${id}`)
2.在需要调用请求的页面发起请求
import {login, getList, getDetail} from 'api.js' //根据自己项目文件的路径来写
//请求
login({name:'张三',password:'123456'})
getList() //没有参数的情况
getDetail(1)
//异步处理等待请求完成获取数据
async function getData () {
const data = await getDetail(1)
console.log(data)
}
getData()
