vue响应拦截

1.在api文件夹中新建http.js(响应拦截)文件

import axios from 'axios'
import store from '../store'
import ElementUI from 'element-ui'

//成功提示函数
const tip = msg => {
  ElementUI.Notification({
    title: '成功',
    message: msg,
    position: 'bottom-right',
    duration: 2000,
    type: 'success'
  })
}
//失败提示函数
const errorTip = msg => {
  ElementUI.Message({
    message: msg,
    type: 'error'
  })
}

// 创建axios实例
const instance = axios.create({timeout: 0})
// 设置post请求头
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

 //请求拦截器
instance.interceptors.request.use(
  config => {
    config.headers.common['userToken'] = store.state.user.userToken
    return config
  },
  error => Promise.error(error)
 )

 //响应拦截器
instance.interceptors.response.use(res => {
    if (res.data.code === '200') {
      if (res.config.method !== 'get') {
        tip(res.data.message)
      }
      return Promise.resolve(res)
    } else {
      //登录超时
      if (res.data.code === '10204') {
        removeToken()
        removeUserId()
        window.location.href = '/login'
      }
      errorTip(res.data.message)
      return Promise.reject(res)
    }
  },
  // 请求失败
  error => {
    const {response} = error
    if (response) {
      // 请求已发出，但是不在2xx的范围
      errorTip(response.data.message)
      return Promise.reject(response)
    } else {
      if (!window.navigator.onLine) {
        store.commit('changeNetwork', false)
      } else {
        return Promise.reject(error)
      }
    }
  })

export default instance

2.新建project.js文件，在接口文件【project.js】中引入【http.js】文件

import axios from './http'
const project = {
  addProject(data) {
    return axios.post(`/gep/project`, data)
  }
}
export default project

3.新建index.js文件，在index.js文件中引入到处project.js文件

import login from './login'
import project from './project'
export default {
  login,
  project
}

4.在project.vue页面中引入api文件夹下面的index.js文件,并调用接口

import api from '../../api'
  methods:{
      api.project.queryAllProjects(this.$store.state.user.userName).then(res => {
      this.allProjectsInfo =res.data;
    })
  }

大致流程如上步骤所示。细节还需自己完善。