element-ui/axios/flask 限制图片上传的Axios POST速度(队列实现)

element-ui上传图片到python flask的时候，居然框架报错。只能覆盖upload的行为，增加axios post队列了

1. JS代码

// 封装有队列的Promise,限制接口访问的速度
// 主要为了减少python服务器的崩溃
import axios, { AxiosRequestConfig } from 'axios'

const _member = {
  _max: 5,
  _count: 0,
  _taskQueue: []
}

function createTask (caller, resolve, reject) {
  return () => {
    caller()
      .then(resolve)
      .catch(reject)
      .finally(() => {
        _member._count -= 1
        if (_member._taskQueue.length !== 0) {
          const task = _member._taskQueue.shift()
          // console.log('push out')
          task()
        }
      })
  }
}

function call (caller) {
  return new Promise((resolve, reject) => {
    _member._count += 1
    const task = createTask(caller, resolve, reject)
    if (_member._count >= _member._max) {
      // console.log('push in')
      _member._taskQueue.push(task)
    } else {
      task()
    }
  })
}

export function LimitAxiosPost (url, data, config, resolve, reject) {
  // debugger
  call(() => axios.post(url, data, config))
    .then(resolve)
    .catch(reject)
}

2. 使用示例

1. 上述JS可以放到单独的JS文件中并导入
2. 覆盖element-ui, upload的http-request

LimitAxiosPost(url, param, config, (res) => {
          // debugger
          if (res.status === 200) {
            that.upload_success(res.data, options.file, that.fileList)
          } else {
            that.upload_error(res.data, options.file, that.fileList)
          }
        }, (res) => {
          // debugger
          that.has_upload_fail += 1
          that.has_upload_count += 1
          that.tableData.push({
            'file_name': options.file.name,
            'message': res.stack
          })
          that.$modal.msgError(options.file.name + '发生异常： ' + res.message)
        })