全本下载地址

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',
}

原文地址：http://www.cnblogs.com/qoon-f/p/16786832.html