目錄

• ajax 文件入口
• 消息隊列
• elementUi loading參數設置
• 基于elementUI的loading全局加載
• 應用場景
• 1.引入庫
• 2.定義全局loading
• 3.使用

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 請求隊列內容請搜索以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持！