在vue中二次封装axios发ajax请求

二次封装axios只需要注意几个方面的问题。

1. 设置全局控制变量，如相同的请求前缀、超时时间等；
2. 请求拦截器，为所有的请求添加请求头中的数据，一般是token；
3. 响应拦截器，为所有的响应添加错误处理；
4. 实例方法，get请求和post请求，请求二进制文件时用blob请求。

import axios from "axios";  
import store from "@store";  
  
const baseURL = "/";  
const timeout = 60000;  
// 配后端数据的接收方式  
// application/json;charset=UTF-8 | application/x-www-form-urlencoded;charset=UTF-8  
const contentType = "application/json;charset=UTF-8";  
// 跨域请求时是否需要凭证  
const withCredentials = false;  
  
// 创建 axios 实例  
const instance = axios.create({  
  baseURL,  
  timeout,  
  headers: {  
    "Content-Type": contentType,  
  },  
  withCredentials,  
});  
  
// 请求拦截器  
instance.interceptors.request.use(  
  (config) => {  
    const token = store.getters["token"];  
    config.headers.token = token;  
  
    return config;  
  },  
  (error) => {  
    return Promise.reject(error);  
  }  
);  
  
// 响应拦截器  
instance.interceptors.response.use(  
  (response) => {  
    if (response.status === 200) {  
      return Promise.resolve(response.data);  
    } else {  
      return Promise.reject(response);  
    }  
  },  
  (error) => {  
    let { message } = error;  
    if (message === "Network Error") {  
      message = "后端接口连接异常";  
    } else if (message.includes("timeout")) {  
      message = "后端接口请求超时";  
    } else if (message.includes("Request failed with status code")) {  
      const code = message.substr(message.length - 3);  
      message = "后端接口" + code + "异常";  
    } else {  
      message = "后端接口未知异常";  
    }  
    // Message.error(message);  
  
    return Promise.reject(error);  
  }  
);  
  
instance.get = (url, params, options = {}) => {  
  const config = {  
    method: "get",  
    url,  
    params,  
    ...options,  
  };  
  return instance(config);  
};  
  
instance.blob = (url, data, method = "get") => {  
  let config = {  
    method,  
    url,  
    responseType: "blob",  
    timeout: 0,  
  };  
  if (method === "post") {  
    config.data = data;  
  } else {  
    config.params = data;  
  }  
  return instance(config);  
};  
  
export default instance;