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()
作者:qoon原文地址:https://www.cnblogs.com/qoon-f/p/16786832.html

%s 个评论

要回复文章请先登录注册