封装一个属于自己的axios请求

摘要

　　axios是一个基于promise的HTTP库，可以用于浏览器中进行AJAX请求处理。在项目中，为了实现通用性，封装了一个axios请求。

 

axios封装

1、配置环境变量

1 2	// 根据不同环境变量选择不同的接口服务器域名 export const BASE_URL = process.env.REACT_APP_API;

2、创建axios实例

　　创建axios实例可以根据官方文档进行属于自己的配置，具体属性可以参考https://www.kancloud.cn/yunye/axios/234845

1 2 3 4 5 6 7 8

// 创建axios实例 const service = axios.create({   baseURL: BASE_URL,   headers: {     'Content-Type': 'application/json;charset=UTF-8'   },   timeout: 5 * 1000 // 请求超时时间 });

3、创建request拦截器

　　在请求、响应被then 或 catch 处理前拦截它们，在发送请求之前可以做些处理或者对请求错误做些什么处理。具体配置可以参考官网。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

// 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拦截器

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

// 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);   } );