Vue添加请求后端数据接口拦截器

我们在请求后端接口的时候会遇到授权问题，就是后端接口需要一个认证，这个认证会在每个接口里返回，同时请求是也要携带，这个时候vue 里的拦截器就很好的做了这一点，统一处理错误及配置请求信息；
处理方案：
1、安装 axios , 命令： npm install axios --save-dev
2：在main.js文件里引用并且设置别名（$axios）方便使用importaxiosfro{m}^{\prime }axio{s}^{\prime }Vue.prototype.$axios = axios;
3:
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
　　// 在发送请求之前做些什么
　　return config
}, function (error) {
　　// 对请求错误做些什么
return Promise.reject(error)
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
　　// 对响应数据做点什么
　　return response
}, function (error) {
　　// 对响应错误做点什么
　　return Promise.reject(error)
});

如果我们使用element-ui 框架，在main.js添加请求接口拦截器 loading,也就是请求接口未返回数据前所需要显示内容的话
解决方案：
再main.js文件下写下面的带按摩
1：先创建一个loading.js
2：引入 import { showLoading, hideLoading } from ‘./loading’;
/* 请求拦截器（请求之前的操作） */
axios.interceptors.request.use((req) => {
showLoading();//使用
return req;
}, err => Promise.reject(err));

/* 请求之后的操作 */
axios.interceptors.response.use((res) => {
hideLoading();
return res;
return Promise.reject(res);
}, (err) => {
hideLoading();
return Promise.reject(err);
});