vue项目中请求接口时使用element的loading组件

import axios from 'axios';
import {
Loading } from 'element-ui';
var instance = axios.create({ //
baseURL: process.env.BASE_API,
responseType: 'json', // 返回json格式a
withCredentials: true, // 默认的sessionId一致
timeout: 0
});
// 在请求接口前创建loading参数
const options = {
text: '载入中...',
background: 'rgba(255,255,255,0.6)',
spinner: 'el-icon-loading',
lock: true,
// target指定需要覆盖的 DOM 节点
target: '#app'
};
let loadingInstance;
instance.interceptors.request.use((config) => {
// 发起请求前先判断之前的loading是否存在
if (loadingInstance) {
loadingInstance.close();
}
// 开启loading
loadingInstance = Loading.service(options);
return config;
});
instance.interceptors.response.use((res) => {
const data = res.data;
if (data.code === 998) {
// ...
}).then(() => {
window.location = '#/login';
location.reload();
});
}
// 关闭loading组件效果
loadingInstance.close();
return data;
}, (err) => {
Message({
type: 'error',
showClose: true,
message: '网络错误'
});
// 关闭loading组件效果
loadingInstance.close();
return Promise.reject(err);
});
instance.prototype.request = (url, data, method, success) => {
// 异步对象
var ajax = new XMLHttpRequest();
// get 跟post
需要分别写不同的代码
if (method === 'get') {
// get请求
if (data) {
// 如果有值
url += '?';
url += data;
}
// 设置 方法 以及 url
ajax.open(method, url);
// send即可
ajax.send();
} else {
// post请求
// post请求 url 是不需要改变
ajax.open(method, url);
// 需要设置请求报文
ajax.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
// 判断data send发送数据
if (data) {
// 如果有值 从send发送
ajax.send(data);
} else {
// 木有值 直接发送即可
ajax.send();
}
}
// 注册事件
ajax.onreadystatechange = function () {
// 在事件中 获取数据 并修改界面显示
if (ajax.readyState === 4 && ajax.status === 200) {
// 将 数据 让 外面可以使用
// return ajax.responseText;
// 当 onreadystatechange 调用时 说明 数据回来了
// ajax.responseText;
// 如果说 外面可以传入一个 function 作为参数 success
success(ajax.responseText);
}
};
};
export default instance;

最后

以上就是花痴发夹为你收集整理的vue项目中请求接口时使用element的loading组件的全部内容，希望文章能够帮你解决vue项目中请求接口时使用element的loading组件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。