vue|vue 优雅的axios 进行ajax请求集合element进行请求loading动画
1.新建一个js文件，假设为ajax： 代码如下->
//引入本地axis包
import axiosfrom "axios/index";
引入ele门插件 按需引入
import {Loading, Message, Notification}from 'element-ui'
引入你定义的路由
import routerfrom '../router/index'
引入你定义的vuex
import storefrom '../store/index'
进行axios默认配置
axios.defaults.timeout =5000
axios.defaults.headers.post['Content-Type'] ='application/json;
';
var that =this
// http请求拦截器
var loadinginstace
axios.interceptors.request.use(config => {
// element ui Loading方法
loadinginstace = Loading.service({fullscreen:true})
const token = window.localStorage.getItem('setTokenTicket')
if (token) {
config.headers['token'] = token
}
return config
}, error => {
loadinginstace.close()
Message.error({
message:'加载超时'
})
return Promise.reject(error)
})
// http响应拦截器
var that =this
axios.interceptors.response.use(data => {// 响应成功关闭loading
loadinginstace.close()
if (data.data.code ===401) {
store.commit('userOut')
localStorage.clear()
setTimeout(function () {
Notification.success({
title:'没有权限',
message:'token失效，跳转到登录页面'
})
router.replace({
【vue|vue 优雅的axios 进行ajax请求集合element进行请求loading动画】path:'/user'
})
},1500)
return false
}else if (data.data.code ===500) {
Notification.success({
title:'数据错误',
message: data.data.msg
})
return false
}else if (data.data.code ===2000) {
Notification.success({
title:'参数错误',
message: data.data.msg
})
return false
}else if (data.data.code ===0) {
return data
}
}, error => {
console.log(error)
loadinginstace.close()
Message.error({
message:'加载失败'
})
Notification.success({
title:'网络错误',
message:'请检查网络连接或者联系管理员'
})
return Promise.reject(error)
})
export default axios
2. 挂载原型上面 vue
// ajax第一步定义的文件
import axiosfrom './config/ajax';
Vue.prototype.$axios = axios;
3.使用
this.$axios.method（）// 具体看文档
推荐阅读
- 热闹中的孤独
- JAVA（抽象类与接口的区别&重载与重写&内存泄漏）
- 放屁有这三个特征的，请注意啦！这说明你的身体毒素太多
- 一个人的旅行，三亚
- 布丽吉特，人生绝对的赢家
- 慢慢的美丽
- 尽力
- 一个小故事，我的思考。
- 家乡的那条小河
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量