Ajax 请求队列解决方案并结合elementUi做全局加载状态

ajax 文件入口

可发送 blob文档流, form表单与通常json解决方案结合消息队列(messagelist)与elementUi(Loading) 制作请求加载方案拥有 post 默认请求方案，也可依据传入修改请求方案(可能需要优化传参放入地址)具有请求超时提醒函数，防止坏请求导致的加载不消失配置有 notice(报错) 控制方案，待后端解决消息分类(即: 开发者用与用户用)

/**
* @param {String} url 请求 `url` 地址
* @param {Object, Array, FormData} params 参数数据
* @param {Object, Array, FormData} query url 拼接参数
* @param {String} method post, get, add, delete
* @param {Boolean} notice false: 默认, 不直接显示返回消息 ——- FIXME 待确认
*/
const ajax = ({ url, data = {}, query = {}, method = \’post\’, notice = false, type = \’\’ }) => {
// 默认url 地址携带参数
const default_query = {
pinUuid: store.getters.pinUuid,
ebiId: store.getters.ebiId
}
query = Object.assign(query, default_query)
url = urlQueryFormat(url, query)

data.pinUuid = store.getters.pinUuid
data = Object.assign(data, default_query)
// 过滤重复的请求事件
// eslint-disable-next-line no-unused-vars
const repeat = messagelist.findRepeat(url, data, method)
// if (repeat.length > 0) {
// eslint-disable-next-line no-constant-condition
if (false) {
Message.warning(\’数据正在获取中, 请稍后…\’)
return Promise.reject({ message: \’数据正在获取中, 请稍后…\’ })
} else {
// 获取分配的 rid 即 index
const rid = messagelist.add(url, data, method)

return new Promise((resolve, reject) => {
// eslint-disable-next-line prefer-const
let reqState = { url, method }
if (method.toLowerCase() === \’get\’) reqState[\’params\’] = data
else if (method.toLowerCase() === \’post\’) {
reqState[\’data\’] = data
if (type === \’x_www_form_urlencoded\’) {
request.defaults.headers.post[\’Content-Type\’] = HttpConstant.FORM_DATA_REQ
let ret = \’\’
for (const it in reqState) {
ret += encodeURIComponent(it) + \’=\’ + encodeURIComponent(reqState[it]) + \’&\’
}
reqState[\’data\’] = ret
} else if (type === \’form_data\’) {
request.defaults.headers.post[\’Content-Type\’] = HttpConstant.MUL_FORM_REQ
} else if (type === \’blob\’) {
request.defaults.headers.post[\’Content-Type\’] = HttpConstant.APPLICATION_BLOB_REQ
reqState.responseType = type
} else {
request.defaults.headers.post[\’Content-Type\’] = HttpConstant.FORM_DATA_REQ
}
}

request(reqState).then(res => {
// setTimeout(() => { // 测试用 fortest
messagelist.del(rid)
resolve(res)
// }, 1000 * 2)
}).catch(err => {
// 当请求错误是否需要重新发包网络错误等处理
messagelist.del(rid)
reject(err)
})
})
}
}

消息队列

使用消息队列制作请求防抖，防止重复请求印象服务器

/** loading 队列 */
const messagelist = {
loading: null,
timer: null,
state: {},
add(url, params, method) {
let rid = 0
while (this.state[rid]) { ++rid }
this.state[rid] = {
rid,
data: JSON.stringify({ url, params, method })
}

this.loading = Loading.service(loadingOption)
this.initTimer()
return rid
},
// url 作为key
del(rid) {
delete this.state[rid]
if (Object.values(this.state).length <= 0) { this.closeLoading() }
},
findRepeat(url, params, method) {
// 获取重复相同请求
return Object.values(this.state).filter(item => {
return item.data === JSON.stringify({ url, params, method })
}).map(item => { return { …item, …{ data: JSON.parse(item.data) }} })
},
initTimer() {
if (this.timer) { clearTimeout(this.timer) }
// 延迟 3s 强制close loading 状态
this.timer = setTimeout(() => {
Message.error(\’请求超时, 自动关闭\’)
if (this.loading) this.loading.close()
}, 1000 * 5)
},
closeLoading() {
if (this.loading) this.loading.close()
clearTimeout(this.timer)
}
}

elementUi loading参数设置

const loadingOption = {
lock: true,
text: \’Loading\’,
spinner: \’el-icon-loading\’,
background: \’rgba(0, 0, 0, 0.7)\’
}

ps: 其他配置项

const HttpConstant = {
// 请求content-type类型
\’FORM_DATA_REQ\’: \’application/x-www-form-urlencoded\’,
\’APPLICATION_JSON_REQ\’: \’application/json\’,
\’MUL_FORM_REQ\’: \’multipart/form-data\’,
\’APPLICATION_BLOB_REQ\’: \’application/vnd.ms-excel;charset=utf-8\’,
}

基于elementUI的loading全局加载

应用场景

场景：前端在发送Ajax请求，请求后台数据时，不允许用户点击当前页面的其他按钮。

Loading 还可以以服务的方式调用。引入 Loading 服务

1.引入库

代码如下（示例）：

import { Loading } from \’element-ui\’

2.定义全局loading

代码如下（示例）：

/* 全局多彩加载层 */
Vue.prototype.$baseColorfullLoading = (wer) => {
const loading = Loading.service({ // 声明一个loading对象
lock: true, // 是否锁屏
text: \’正在加载…\’, // 加载动画的文字
spinner: \’inner-circles-loader\’, // 引入的loading图标
background: \’hsla(0,0%,100%,0)\’, // 背景颜色
target: document.querySelector(wer)
})
setTimeout(function() { // 设定定时器，超时5S后自动关闭遮罩层，避免请求失败时，遮罩层一直存在的问题
loading.close() // 关闭遮罩层
}, 2000000)
return loading
}

3.使用

html标签添加标识class 或 id(在表格上加遮罩)

//添加class=\”todoList\”
<el-table
:data=\”currentTableData\”
class=\”todoList\”
size=\”small\”
style=\”width: 100%\”
highlight-current-row
@row-click=\”handleSelectionChange\”>
</el-table>

js调用

// 请求时调用
const loading = this.$baseColorfullLoading(\’.app-main\’)
//请求完成后关闭
loading.close()

到此这篇关于Ajax请求队列解决方案并结合elementUi做全局加载状态的文章就介绍到这了,更多相关Ajax请求队列内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章希望大家以后多多支持悠久资源网！

您可能感兴趣的文章: