Axios超级封装（拦截请求+数据请求）代码示例

Axios 对于vue来说是非常非常有用的，我们做适当的封装，可以更加的节省我们的开发时间，下面代码为作者使用的很漂亮的封装，不仅可以拦截请求还可以灵活的请求数据。

import axios from "axios"; 
import { Message } from "element-ui"; 
axios.defaults.withCredentials = true; //配置允许跨域携带cookie 
const HttpError = { 
  400: "请求错误", 
  401: "未授权，请登录", 
  403: "拒绝访问", 
  404: "求地址出错", 
  408: "请求超时", 
  500: "服务器开个小差，请稍后再试", 
  501: "服务器开个小差，请稍后再试", 
  502: "服务器开个小差，请稍后再试", 
  503: "服务器开个小差，请稍后再试", 
  504: "服务器开个小差，请稍后再试", 
  505: "HTTP版本不受支持" 
}; 
axios.interceptors.request.use( 
  config => { 
    config.headers.common = { 
      "Content-Type": "application/json;charset=UTF-8", 
      "X-Gaia-Api-Key": "888999-2912-48c3-9733-7246f2690166", 
      "X-ER-System-Info": "default", 
      "Accept-Language": "zh-CN", 
      "X-ER-User-Info": "bGl1bGlmYW5n", 
    }; 
    config.crossDomain = true;  //配置跨域状态 
    config.timeout = 200000;   //配置超时时间 
    return config; 
  }, 
  error => { 
    return Promise.reject(error); 
  } 
); 
 
// 拦截响应response，并做一些错误处理 
axios.interceptors.response.use( 
  res => { 
    try { 
      // TODO: set response pre-judge-handler 
    } catch (e) { 
      console.info( 
        `错误名称: ${e.name}\n错误描述: ${e.message}\n错误堆栈: ${e.stack}` 
      ); 
    } 
    return res; 
  }, 
 
  err => { 
    if (err.response.status == "401") { 
      console.log(err.response); 
      let url = err.response.data.loginUrl; 
      let localUrl = escape(escape("#/" + location.href.split("/#/")[1])); 
      window.location.href = url + localUrl; 
    } 
    let msg = 
      err.toString().indexOf("timeout") != -1 
        ? "请求超时，请稍后再试" 
        : "请求错误"; 
    err && err.response && (msg = HttpError[err.response.status]); 
    return Promise.reject(err); 
  } 
); 
/** 
 * @func axios的二次封装 
 * @param method-请求方法，url-接口地址，data-请求参数 
 */ 
const request = (url, data = {}, method = "GET") => { 
  let params; 
  if (method.toUpperCase() === "GET") { 
    params = "params"; 
  } else { 
    params = "data"; 
  } 
  console.log(data); 
  return new Promise((resolve, reject) => { 
    axios({ 
      url: url, 
      method: method, 
      [params]: data 
    }) 
      .then(res => { 
        resolve(res); 
      }) 
      .catch(e => { 
        if (e.response.status == "500") { 
          let response = JSON.parse(JSON.stringify(e.response)); 
          let message = response.data && response.data.message; 
          if (message) { 
            Message.error(message); 
            return false; 
          } 
        } 
        reject(e); 
      }); 
  }); 
}; 
 
export default request; 

使用说明：

1，每次请求后台数据，都要做axios拦截处理，如果未授权，则跳转到后台指定的一个URL地址。

2，请求数据方法

url为接口地址，可以拼接 
XX为参数，可以为空 
MM为大写的方法名称，如POST，GET，UPDATE，DELETE 

this.$request(url,{XX},"MM") 
      .then(res => { 
        this.Data = res.data.children; 
      }) 
      .catch(e => { 
        this.$message.error(e); 
      });