axios与vue的封装
程序员文章站
2022-07-02 12:16:09
...
axios与vue的封装
var $axios = axios.create({
baseURL: 'http://localhost:8080/', //设置基本路径
// `withCredentials` 表示跨域请求时是否需要使用凭证(是否发送sessionid)
withCredentials: true, // 默认的
});
//判断Vue是否存在
if (Vue) {
//给Vue对象添加axios的原型属性
Vue.prototype.$axios = $axios;
//给Vue添加一个原型函数,其中参数为promiseHandler为一个axios请求函数
Vue.prototype.$ajax = function(getPromiseHandler) {
//创建一个promise对象,resolve为成功后执行的方法, reject失败后执行的方法
let promise = new Promise((resolve, reject) => {
try {
//显示信息加载层
let loadIndex = layer.load();
getPromiseHandler
.then((response) => {
//获得请求后,关闭加载层,进行处理
layer.close(loadIndex);
//获取response中的信息,result是从服务端请求的数据信息
let result = response.data;
//该结果中包含像服务端请求的一切信息,包括判断是否登录验证,等等
//判断result中是否包含login属性,如果不包含,表示该操作不需要登录验证
//hasOwnProperty方法为对象的方法,用来判断属性是否存在一个对象,
//如果不存在,表示不需要登录验证,直接通过
if (!result.hasOwnProperty("login")) {
//如果不包含login属性,直接通过
resolve(result);
return;
}
//表示包含login属性,判断是否已登录
if (!result.login) { //表示未登录,跳转登录页面
layer.msg('请登录后访问', {
icon: 7,
time: 1000 //2秒关闭(如果不配置,默认是3秒)
}, function() {
window.top.location.href = "../login/login.html" //*跳转登录页面,
});
return;
}
//登录成功后
resolve(result); //登录成功,返回信息
})
.catch((err) => {
//请求失败后,同样关闭加载层
layer.close(loadIndex);
if (error.response) {
// 请求已发出,但服务器响应的状态码不在 2xx 范围内
console.log(error.response.data);
layer.msg('请求出错', {
icon: 7,
time: 2000 //2秒关闭(如果不配置,默认是3秒)
});
} else {
// Something happened in setting up the request that triggered an Error
layer.msg('系统升级中。。。', {
icon: 7,
time: 2000 //2秒关闭(如果不配置,默认是3秒)
});
console.log('Error', error.message);
}
console.log(error.config);
});
} catch (e) { //代码错误问题
layer.close(loadIndex);
layer.msg('JavaScript代码错误:' + error.message, {
icon: 2,
time: 1500
});
}
});
//将promise对象返回
return promise;
}
//添加一个原型get方法
Vue.prototype.$myGet = function(url, config) {
let promise = new Promise((resolve, reject) => {
this.$ajax(this.$axios.get(url, config))
.then((result) => {
resolve(result);
});
});
return promise;
}
//添加一个原型post方法
Vue.prototype.$myPost = function(url, data, config) {
let promise = new Promise((resolve, reject) => {
this.$ajax(this.$axios.post(url, data, config))
.then((result) => {
resolve(result);
});
});
return promise;
}
//添加一个原型put方法
Vue.prototype.$myPut = function(url, data, config) {
let promise = new Promise((resolve, reject) => {
this.$ajax(this.$axios.put(url, data, config))
.then((result) => {
resolve(result);
});
});
return promise;
}
//添加一个原型delete方法
Vue.prototype.$myDelete = function(url, config) {
let promise = new Promise((resolve, reject) => {
this.$ajax(this.$axios.delete(url, config))
.then((result) => {
resolve(result);
});
});
return promise;
}
}
上一篇: 分库分表就能无限扩容吗,解释得太好了