Solicitar interceptor e interceptor de respuesta
1. Agregue un nuevo archivo http.js, configure el interceptor de respuesta axios y el interceptor de solicitudes. Luego importe el componente de carga. Y establezca las dos funciones startLoading y endLoading, el rol es como lo muestra el nombre de la función.
import axios from 'axios'
import { Message, Loading } from 'element-ui'
let loading
function startLoading() {
loading = Loading.service({
lock: true,
text: '为小主拼命加载中...',
background: 'rgba(0,0,0,7)'
})
}
function endLoading() {
loading.close()
}
// 请求拦截
axios.interceptors.request.use(config => {
startLoading()
return config
}, error => {
return Promise.reject(error)
})
// 响应拦截
axios.interceptors.response.use( response => {
endLoading()
return response
}, error => {
endLoading()
Message.error(error.response.data)
return Promise.reject(error)
})
export default axios
Introduzca http.js en main.js y vincúlelo a vue
import Vue from 'vue'
import App from './App.vue'
// 引入刚才写的请求拦截
import axios from './http'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI);
// 绑定axios在vue属性上
Vue.prototype.$axios = axios
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')