Vue中的接口错误拦截

接口错误拦截：

统一报错
未登录时的统一拦截
请求、返回值的统一处理

安装插件：

axios 请求数据
vue-axios 将作用域对象挂载到vue实例中，方便我们用this调用

main.js：

import Vue from 'vue'
import router from './router'
import axios from 'axios'
import VueAxios from 'vue-axios'
import App from './App.vue'
  
// 设置基础值  
// 根据前端的跨域方式做调整（这里指的是接口代理） 
// 在“跨域——接口代理”中的vue.config.js中已做过处理（/yian/mi : /api/yian/mi => /yian/mi）
axios.defaults.baseURL='/api';
// 设置超时时间
axios.defaults.timeout=8000;
// 接口错误拦截
axios.interceptors.response.use(function(response){
  // 获取到接口返回的值
  let res=response.data;
  if(res.status==0){
    // 成功
    return res.data;
  }else if(res.status==10){
    // 登录时的接口报错  跳转到登录页面
    // 使用window.location.href跳转的原因：
    // 在main.js中用路由跳没有用，路由是挂载到vue实例中，在每一个页面里才能用this.$route.push，在这里this并没有指向vue
    window.location.href='/#/login'
  }else{
    // 报错
    alert(res.msg);
  }
});

Vue.use(VueAxios,axios);
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

axios文档：https://www.npmjs.com/package/axios