在React中封装axios。
第一步：创建实例
使用自定义配置创建一个axios实例：
const instance = axios.create({
// 设置超时时间,单位毫秒
timeout: 1000 //即1秒
})
复制代码第二步：请求拦截器
如果接口有鉴权认证（token），就要在请求时带上token，使用axios拦截器机制，就可以在请求的拦截器中添加token。
instance.interceptors.request.use(function (config) {
// 登录时就已经把token存到了cookie中
const token = cookie.get("token");
if (token) {
config.headers.authorization = token;
}
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
复制代码第三步：响应拦截器
获取到服务器返回的状态码，然后根据状态码进行相对应的操作。
instance.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
if (error && error.response) {
message.destroy();
switch (error.response.status) {
case 400:
message.error('错误请求');
break;
case 401:
message.info({
content: "登录过期，请重新登录",
type: "info",
duration: 3,
maxCount: 1,
onClose: () => {
cookie.remove("userInfo");
window.location.href = '/login';
}
})
break;
case 403:
message.info("拒绝访问");
break;
case 404:
message.info("请求错误，未找到资源");
break;
case 405:
message.info("请求方法未允许");
break;
case 408:
message.info("请求超时");
break;
case 500:
message.info("服务端出错");
break;
case 501:
message.info("网络未实现");
break;
case 502:
message.info("网络错误");
break;
case 503:
message.info("服务不可用");
break;
case 504:
message.info("网络超时");
break;
case 505:
message.info("http版本不支持该请求");
break;
default:
message.info(`连接错误${error.response.status}`);
}
}
return Promise.reject(error);
});
复制代码第四步：使用
一、POST方法
post请求中的Content-Type常见的三种形式：
- Content-Type：application/json
- Content-Type：application/x-www-form-urlencoded
- Content-Type：multipart/form-data
注：如果Content-Type是application/x-www-form-urlencoded形式，通过上面传递参数，后端收不到，必须对参数数据进行序列化处理，让它以普通表单形式（键值对）发送到后端，而不是json形式。可以通过第三方依赖来序列化参数----qs模块。
封装POST请求
const _post = (api, data, headers = {}) => {
return new Promise((resolve, reject) => {
instance.post(api, data, { headers })
.then(res => { resolve(res) })
.catch(error => { reject(error) })
})
}
复制代码对三种POST的Content-Type请求，进行分类：
const post = (api, data, headers = {}) => {
headers['Content-Type'] = 'application/x-www-form-urlencoded'
return _post(api, qs.stringify(data), headers)
}
const postJson = (api, data, headers = {}) => {
headers['Content-Type'] = 'application/json;charset=utf-8'
return _post(api, JSON.stringify(data), headers)
}
const postFormData = (api, data, headers = {}) => {
headers['Content-Type'] = 'multipart/form-data'
return _post(api, data, headers)
}
复制代码二、GET方法
const get = (api, params = {}, headers = {}) => {
return new Promise((resolve, reject) => {
instance.get(api, { params, headers })
.then(res => {
resolve(res)
})
.catch(error => {
reject(error)
})
})
}
复制代码整体代码展示：
import axios from 'axios';
import qs from 'qs'
import cookie from 'js-cookie';
import { message } from 'antd';
const instance = axios.create({
timeout: 120000,
});
//请求拦截处理
instance.interceptors.request.use(function (config) {
// ...如上
}, function (error) {
// ...如上
});
instance.interceptors.response.use(function (response) {
// ...如上
}, function (error) {
// ...如上
});
const _post = (api, data, headers = {}) => {
// ...如上
}
const post = (api, data, headers = {}) => {
// ...如上
}
const postJson = (api, data, headers = {}) => {
// ...如上
}
const postFormData = (api, data, headers = {}) => {
// ...如上
}
const get = (api, params = {}, headers = {}) => {
// ...如上
}
// 导出，供各页面调用
export default { post, postJson, postFormData, get };
复制代码调用
api.js
// 导入
import http from './request';
// 封装调用，暴露出去调用
export const getAdvertiserList = (params) => http.get('/api/project/advertiser', params);
复制代码参考一：Axios中文官网
