Ajax?請(qǐng)求隊(duì)列解決方案并結(jié)合elementUi做全局加載狀態(tài)

更新時(shí)間：2022年10月13日 09:33:28 作者：qoon

這篇文章主要介紹了Ajax?請(qǐng)求隊(duì)列解決方案并結(jié)合elementUi做全局加載狀態(tài),使用消息隊(duì)列制作請(qǐng)求防抖，防止重復(fù)請(qǐng)求印象服務(wù)器，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

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ò)) 控制方案，待后端解決消息分類(即: 開(kāi)發(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)
  // 過(guò)濾重復(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)前頁(yè)面的其他按鈕。

Loading 還可以以服務(wù)的方式調(diào)用。引入 Loading 服務(wù)

1.引入庫(kù)

代碼如下（示例）：

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í)，遮罩層一直存在的問(wèn)題
     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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: