import axios from "axios";
import { message } from 'antd';
let request = axios.create({
headers: {
'Content-Type': 'application/json; charset=utf-8',
}
})
// url
request.defaults.baseURL = process.env.REACT_APP_BASE_URL;
const formatRequestParams = (params: any) => {
if (params && params !== {}) {
const obj = Object.keys(params).reduce((previousValue, currentValue) => {
if (!params[currentValue]) {
return {
...previousValue,
[currentValue]: params[currentValue]
}
}
return previousValue
}, {})
return obj
}
return params
}
request.interceptors.request.use(
config => {
if (config.dataType !== 'form') {
config.data = JSON.stringify(config.data);
}
const formatParams = formatRequestParams(config.params)
const newConfg = {
...config,
headers: {
...config.headers,
'X-Token': localStorage.getItem('token')
},
params: formatParams,
postData: {
...config.postData,
}
};
return newConfg;
},
err => {
return Promise.reject(err)
})
request.interceptors.response.use(function (response) {
const { data, headers } = response;
return headers['content-type'] === "application/octet-stream" ? response : data
}, function (error) {
const status = error?.response?.status;
if (status === 417) {
// 业务场景,各自发挥
window.alert('Your token is expired, please login again')
}
const data = error?.response?.data;
const msg = data?.error?.msg;
message.error(msg)
return Promise.resolve({
data: [],
paging: {},
error: true,
response: error?.response || {},
});
});
export default request;
API 封装(axios)
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 前言 在做vue中大型项目的时候,官方推荐使用axios,但是原生的axios可能对项目的适配不友好,所以,在工程...
- 文件目录 request.js state.js http.js api.js 页面写法 http 请求 http...
- 一、axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise...