首先创建一个axios.js文件
导入我们所需要的依赖
import axios from "axios";
import Element from 'element-ui'
import router from "./router";设置请求头和它的类型和地址
注意先注释这个url,还没有解决跨域问题,不然会出现跨域
// axios.defaults.baseURL = "http://localhost:8081"
const request = axios.create({
timeout: 5000,
headers: {
//请求头的格式要求为json
'Content-Type': 'application/json; charset=utf-8'
}
})
request.interceptors.request.use(config => {
//将localStorage中的token放入请求头
config.headers['Authorization'] = localStorage.getItem("token") // 请求头带上token
return config
})设置后端返回给前端数据的处理方式
//就是当后端返回给前端code的值来回馈不同的效果
request.interceptors.response.use(response => {
let res = response.data;
console.log("response")
console.log(res)
if (res.code === 200) {
return response
} else {
Element.Message.error(res.msg? res.msg : '系统异常！', {duration: 3 * 1000})
return Promise.reject(response.data.msg)
}
},
error => {
console.log(error)
if(error.response.data) {
error.message = error.response.data.msg
}
if(error.response.status === 401) {
router.push("/login")
}
Element.Message.error(error.message, {duration: 3 * 1000})
return Promise.reject(error)
}
)
将他暴露出来
export default request然后在main.js中修改
import axios from 'axios'
Vue.prototype.$axios = axios //修改为
import request from "./axios";
Vue.prototype.$axios = request
就可以了
