记录：axios请求接口、拦截器封装

又来啦~~~~
进入正题：
api.js 请求方法封装、分了不同的场景

import axios from '@/api/filter'

/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function get(url,params={}){
  return new Promise((resolve,reject) => {
    axios.get(url,{
      params:params
    })
      .then(response => {
        resolve(response.data);
      })
      .catch(err => {
        reject(err)
        console.log('网络异常');
      })
  })
}

/**
 * 封装post请求
 * @param url
 * @param params
 * @returns {Promise}
 */
export function post(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url,params,{
      headers: {
        'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'
      }
    })
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err)
        console.log('网络异常');
      })
  })
}

/**
 * 封装post请求json
 * @param url
 * @param params
 * @returns {Promise}
 */
export function postJSON(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url,params,{
      headers: {
        'Content-Type':'application/json;charset=UTF-8'
      }
    })
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err)
        console.log('网络异常');
      })
  })
}

/**
 * 封装post请求upload
 * @param url
 * @param params
 * @returns {Promise}
 */
export function postUpload(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url,params,{
      headers: {
        'Content-Type':'multipart/form-data;charset=utf-8'
      }
    })
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err)
        console.log('网络异常');
      })
  })
}

/**
 * 封装put请求
 * @param url
 * @param data
 * @returns {Promise}
 */
export function put(url,data = {}){
  return new Promise((resolve,reject) => {
    axios.put(url,data)
      .then(response => {
        if(response.data.code === 200){
          resolve(response.data.data);
        }else{
          this.$Message.info(response.data.msg)
        }
      },err => {
        reject(err);
        let message = '请求失败！请检查网络';
        if(err.response)message=err.response.data.message;
        this.$Message.info('网络异常');
      })
  })
}

/**
 * 封装delete请求
 * @param url
 * @param data
 * @returns {Promise}
 */
export function del(url,data = {}){
  return new Promise((resolve,reject) => {
    axios.delete(url,data)
      .then(response => {
        if(response.data.code === 200){
          resolve(response.data.data);
        }else{
          this.$Message.info(response.data.msg)
        }
      },err => {
        reject(err);
        let message = '请求失败！请检查网络';
        if(err.response)message=err.response.data.message;
        this.$Message.info('网络异常');
      })
  })
}


export default {
  get,
  post,
  postJSON,
  postUpload,
  put,
  del
}

url.js 接口方法封装

import {get,post,postJSON,postUpload,put,del} from './api'

/**
 * 接口地址封装
 * event：前端定义接口方法名称，在单页面应用
 * url：后端接口
 */
export const event = p => post(url,p);

filter.js 拦截器（记得安装 axios、QS等依赖哦~）

import axios from 'axios';
import QS from 'qs'

if (process.env.NODE_ENV == 'development') {
  axios.defaults.baseURL = '';
} else if (process.env.NODE_ENV == 'production') {
  axios.defaults.baseURL = '';
}

//http request 拦截器
axios.interceptors.request.use(
  config => {
    if(config.headers["Content-Type"] === "application/json;charset=UTF-8"){
      if (sessionStorage.token) {
        config.headers["Authorization"] = sessionStorage.token;
      }
      config.timeout = 15000;
      config.data = JSON.stringify(config.data);
      return config
    }else if(config.headers["Content-Type"] === "application/x-www-form-urlencoded;charset=UTF-8"){
      if (sessionStorage.token) {
          config.headers["Authorization"] = sessionStorage.token;
      }
      config.timeout = 15000;
      config.data = QS.stringify(config.data)
      return config;
    }else{
      if (sessionStorage.token) {
        config.headers["Authorization"] = sessionStorage.token;
      }
      config.timeout = 15000;
      return config;
    }
  },
  err => {
    return Promise.reject(err);
  }
);

//响应拦截器即异常处理
axios.interceptors.response.use(response => {
  if( typeof response.data === 'string' ) {
    response.data = res;
  }
  return response
}, err => {
  if (err && err.response) {
    switch (err.response.status) {
      case 400:
        console.log('错误请求')
        break;
      case 401:
        console.log('未授权，请重新登录')
        break;
      case 403:
        localStorage.removeItem('token');
        console.log('拒绝访问')
        break;
      case 404:
        console.log('请求错误,未找到该资源')
        break;
      case 405:
        console.log('请求方法未允许')
        break;
      case 408:
        console.log('请求超时')
        break;
      case 500:
        console.log('服务器端出错')
        break;
      case 501:
        console.log('网络未实现')
        break;
      case 502:
        console.log('网络错误')
        break;
      case 503:
        console.log('服务不可用')
        break;
      case 504:
        console.log('网络超时')
        break;
      case 505:
        console.log('http版本不支持该请求')
        break;
      default:
        console.log(`连接错误${err.response.status}`)
    }
  } else {
    console.log('连接到服务器失败')
  }
  return Promise.resolve(err.response)
})

export default axios;

页面应用：

<script>
import { event } from “./url”
	export default{
		methods:{
			get(){
				event(param).then(res=>{
				});
			}
	}
}

</script>

欢迎各位大神指点~~~~~~~~