封装属于本身的axios请求

摘要

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

 

axios封装

一、配置环境变量

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

二、建立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 // 请求超时时间
});

三、建立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);
  }
);

四、建立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);
  }
);