vue axios请求/响应拦截器

Posted 2021-02-11 小白&小菜

// main.js中配置


// 引入 axios
import Axios from ‘axios‘
// 这时候如果在其它的组件中，是无法使用 axios 命令的。
// 但如果将 axios 改写为 Vue 的原型属性，就能解决这个问题
Vue.prototype.$axios = Axios

// 引用mint-ui
import MintUI from ‘mint-ui‘
import ‘mint-ui/lib/style.css‘
Vue.use(MintUI)    // 一次性注册多个全局组件

// 添加请求拦截器http request
Axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    MintUI.Indicator.open(‘加载中...‘);
    return config;
}, function (error) {
    // 对请求错误做些什么
    console.log("请求拦截器出错",error);
});

// 添加响应拦截器http respones
Axios.interceptors.response.use(function (response) {
    MintUI.Indicator.close();
    return response;
}, function (error) {
    console.log("响应拦截器出错",error);
});