- 引入依赖
yarn add axios
- 创建
plugins/axios.js文件
import axios from 'axios';
import Element from 'element-ui'
import router from "../router/index";
import Vue from "vue";
axios.defaults.baseURL = 'http://localhost:8080'
const request = axios.create({
timeout: 5000,
headers: {
'Content-Type': 'application/json;charset=utf-8'
}
})
request.interceptors.request.use(config => {
config.headers['Authorization'] = localStorage.getItem('token');
return config;
})
request.interceptors.response.use(response => {
if (response.data.code === 200) {
return response
} else {
Element.Message.error(response.data.msg ? response.data.msg : '系统异常！', {duration: 3 * 1000})
return Promise.reject(response.data.msg)
}
}, error => {
console.log(error)
if (error.data) {
error.message = error.response.data.msg
}
if (error.status === 401) {
router.push("/login")
}
Element.Message.error(error.message, {duration: 3 * 1000})
return Promise.reject(error)
})
Vue.prototype.$axios=request;
- 主函数
main.js引入
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
//elementUI
import './plugins/elementUI'
//axios请求
import './plugins/axios'
//全局样式
import './assets/css/main.css'
//mockjs
import './plugins/mock'
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app') import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'Vue.config.productionTip = false//elementUIimport './plugins/elementUI'//axios请求import './plugins/axios'//全局样式import './assets/css/main.css'//mockjsimport './plugins/mock'new Vue({ router, store, render: h => h(App)}).$mount('#app')import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'Vue.config.productionTip = falseimport './plugins/elementUI'import './plugins/axios'import './assets/css/main.css'//引入mockjsimport './plugins/mock'new Vue({ router, store, render: h => h(App)}).$mount('#app')
