vue中使用axios拦截器简介

首先在main.js引入axios

import axios from "axios";

请求拦截器

axios.interceptors.request.use(
  config => {
    const token = sessionStorage.getItem('token')
      config.headers.authorization = token  //在请求头上添加token
    }
    return config
  },
  error => {
    return Promise.reject(error)
  })

相应拦截器

axios.interceptors.response.use(
  response => {
    if (response.data.code) {
      switch (response.data.code) {
        case 403:
          router.replace({path: 'login'})  //判断登录失效，跳到登录页
      }
    }
    return response
  },
  error => {
    return Promise.reject(error) 
  })

 可以把axios添加到vue实例的原型上，作为Vue的原型属性，这样在组件中就可以直接this.$http使用axios了

//在main.js文件中
import Vue from 'vue'
import axios from "axios";

Vue.prototype.$http = axios;

//页面中使用
this.$http.post(url, params).then(res=>{}).catch(error=>{});