封装属于自己的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);
  }
);