Ajax?請(qǐng)求隊(duì)列解決方案并結(jié)合elementUi做全局加載狀態(tài)
ajax 文件入口
可發(fā)送 blob文檔流, form表單 與 通常json解決方案
結(jié)合 消息隊(duì)列(messagelist)與elementUi(Loading) 制作請(qǐng)求加載方案
擁有 post 默認(rèn)請(qǐng)求方案,也可依據(jù)傳入 修改請(qǐng)求方案(可能需要優(yōu)化傳參放入地址)
具有 請(qǐng)求超時(shí)提醒函數(shù),防止壞請(qǐng)求導(dǎo)致的加載不消失
配置有 notice(報(bào)錯(cuò)) 控制方案,待后端解決消息分類(即: 開發(fā)者用與用戶用)
/**
* @param {String} url 請(qǐng)求 `url` 地址
* @param {Object, Array, FormData} params 參數(shù)數(shù)據(jù)
* @param {Object, Array, FormData} query url 拼接參數(shù)
* @param {String} method post, get, add, delete
* @param {Boolean} notice false: 默認(rèn), 不直接顯示返回消息 ------- FIXME 待確認(rèn)
*/
const ajax = ({ url, data = {}, query = {}, method = 'post', notice = false, type = '' }) => {
// 默認(rèn)url 地址攜帶 參數(shù)
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)
// 過濾重復(fù)的請(qǐng)求 事件
// 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('數(shù)據(jù)正在獲取中, 請(qǐng)稍后...')
return Promise.reject({ message: '數(shù)據(jù)正在獲取中, 請(qǐng)稍后...' })
} 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(() => { // 測(cè)試用 fortest
messagelist.del(rid)
resolve(res)
// }, 1000 * 2)
}).catch(err => {
// 當(dāng)請(qǐng)求錯(cuò)誤 是否需要重新發(fā)包 網(wǎng)絡(luò)錯(cuò)誤等 處理
messagelist.del(rid)
reject(err)
})
})
}
}
消息隊(duì)列
使用 消息隊(duì)列 制作 請(qǐng)求防抖,防止重復(fù)請(qǐng)求印象服務(wù)器
/** loading 隊(duì)列 */
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) {
// 獲取重復(fù)相同請(qǐng)求
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 強(qiáng)制close loading 狀態(tài)
this.timer = setTimeout(() => {
Message.error('請(qǐng)求超時(shí), 自動(dòng)關(guān)閉')
if (this.loading) this.loading.close()
}, 1000 * 5)
},
closeLoading() {
if (this.loading) this.loading.close()
clearTimeout(this.timer)
}
}
elementUi loading參數(shù)設(shè)置
const loadingOption = {
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
}
ps: 其他配置項(xiàng)
const HttpConstant = {
// 請(qǐng)求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全局加載
應(yīng)用場(chǎng)景
場(chǎng)景:前端在發(fā)送Ajax請(qǐng)求,請(qǐng)求后臺(tái)數(shù)據(jù)時(shí),不允許用戶點(diǎn)擊當(dāng)前頁面的其他按鈕。
Loading 還可以以服務(wù)的方式調(diào)用。引入 Loading 服務(wù)
1.引入庫
代碼如下(示例):
import { Loading } from 'element-ui'2.定義全局loading
代碼如下(示例):
/* 全局多彩加載層 */
Vue.prototype.$baseColorfullLoading = (wer) => {
const loading = Loading.service({ // 聲明一個(gè)loading對(duì)象
lock: true, // 是否鎖屏
text: '正在加載...', // 加載動(dòng)畫的文字
spinner: 'inner-circles-loader', // 引入的loading圖標(biāo)
background: 'hsla(0,0%,100%,0)', // 背景顏色
target: document.querySelector(wer)
})
setTimeout(function() { // 設(shè)定定時(shí)器,超時(shí)5S后自動(dòng)關(guān)閉遮罩層,避免請(qǐng)求失敗時(shí),遮罩層一直存在的問題
loading.close() // 關(guān)閉遮罩層
}, 2000000)
return loading
}3.使用
html標(biāo)簽添加標(biāo)識(shí)class 或 id(在表格上加遮罩)
//添加class="todoList" <el-table :data="currentTableData" class="todoList" size="small" style="width: 100%" highlight-current-row @row-click="handleSelectionChange"> </el-table>
js調(diào)用
// 請(qǐng)求時(shí)調(diào)用
const loading = this.$baseColorfullLoading('.app-main')
//請(qǐng)求完成后關(guān)閉
loading.close()到此這篇關(guān)于Ajax 請(qǐng)求隊(duì)列解決方案并結(jié)合elementUi做全局加載狀態(tài)的文章就介紹到這了,更多相關(guān)Ajax 請(qǐng)求隊(duì)列內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
STRUTS+AJAX+JSP 請(qǐng)求到后臺(tái)亂碼問題解決方法
STRUTS+AJAX+JSP 請(qǐng)求到后臺(tái)亂碼問題可在AJAX請(qǐng)求URL之前把參數(shù)進(jìn)行encodeURI()轉(zhuǎn)碼來解決,遇到類似情況的朋友可以參考下2013-12-12
基于Jquery.history解決ajax的前進(jìn)后退問題
本文主要給大家介紹基于Jquery.history解決ajax的前進(jìn)后退問題,涉及到j(luò)query前進(jìn)后退相關(guān)方面的知識(shí),本文內(nèi)容經(jīng)典,非常具有參考價(jià)值,特此把jquery前進(jìn)后退相關(guān)知識(shí)分享在腳本之家網(wǎng)站供大家參考2015-10-10
Select2在使用ajax獲取遠(yuǎn)程數(shù)據(jù)時(shí)顯示默認(rèn)數(shù)據(jù)的方法
今天小編就為大家分享一篇Select2在使用ajax獲取遠(yuǎn)程數(shù)據(jù)時(shí)顯示默認(rèn)數(shù)據(jù)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
$.ajax傳JSON數(shù)據(jù)到后臺(tái)的注意事項(xiàng)小結(jié)
這篇文章主要介紹了$.ajax傳JSON數(shù)據(jù)到后臺(tái)的注意事項(xiàng),需要的朋友可以參考下2014-05-05
防止重復(fù)發(fā)送Ajax請(qǐng)求的解決方案
這篇文章主要介紹了防止重復(fù)發(fā)送Ajax請(qǐng)求的解決方案,感興趣的小伙伴們可以參考一下2016-01-01
Ajax 高級(jí)功能之a(chǎn)jax向服務(wù)器發(fā)送數(shù)據(jù)
這篇文章主要介紹了Ajax 高級(jí)功能之a(chǎn)jax向服務(wù)器發(fā)送數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2016-08-08
簡(jiǎn)單實(shí)現(xiàn)ajax拖拽上傳文件
這篇文章主要教大家如何簡(jiǎn)單實(shí)現(xiàn)ajax拖拽上傳文件,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-04-04

