封装属于自己的axios请求
摘要
axios是一个基于promise的HTTP库,可以用于浏览器中进行AJAX请求处理。在项目中,为了实现通用性,封装了一个axios请求。
axios封装
1、配置环境变量
// 根据不同环境变量选择不同的接口服务器域名 export const BASE_URL = process.env.REACT_APP_API;
2、创建axios实例
创建axios实例可以根据官方文档进行属于自己的配置,具体属性可以参考https://www.kancloud.cn/yunye/axios/234845
// 创建axios实例 const service = axios.create({ baseURL: BASE_URL, headers: { 'Content-Type': 'application/json;charset=UTF-8' }, timeout: 5 * 1000 // 请求超时时间 });
3、创建request拦截器
在请求、响应被then 或 catch 处理前拦截它们,在发送请求之前可以做些处理或者对请求错误做些什么处理。具体配置可以参考官网。
// request拦截器 service.interceptors.request.use( config => { // 登录时,Token登录 // const token = // localStorage.getItem('token') || sessionStorage.getItem('token'); // if (token) { // config.headers.Authorization = 'JWT ' + token; // } return config; }, error => { // Do something with request error console.log(error); // for debug return Promise.reject(error); } );
4、创建response拦截器
// response 拦截器 service.interceptors.response.use( response => { const data = response.data; if (data.code === 2000) { return data.data; } if (data.code === 4040) { return Promise.reject({message: '网络中断'}); } if (data.code === 4030) { return Promise.reject({message: '登录过期'}); } return Promise.reject(data); }, error => { error.message = '网络超时'; return Promise.reject(error); } );
赞 (0)