返回

多文件下载的一个简单封装

前端

前言

微信小程序中,提供了wx.downloadFile接口进行文件下载,但是此接口一次只能下载一个文件。如果需要下载多个文件,就需要使用循环或者Promise等方式来实现,很容易造成回调地狱。本文提供了一个简单的封装,可以让我们更方便地进行多文件下载,并一定程度地避免了回调地狱。

封装函数

// 下载文件
const downloadFile = (url, path, successCallback, failCallback) => {
  return new Promise((resolve, reject) => {
    wx.downloadFile({
      url,
      filePath: path,
      success: (res) => {
        if (successCallback) {
          successCallback(res)
        }
        resolve(res)
      },
      fail: (res) => {
        if (failCallback) {
          failCallback(res)
        }
        reject(res)
      }
    })
  })
}

// 多文件下载
const multiDownloadFile = (tasks, concurrency = 5) => {
  // 创建一个任务队列
  const taskQueue = []
  // 创建一个Promise数组
  const promiseArray = []
  // 并发数
  let running = 0

  tasks.forEach((task) => {
    // 将任务放入队列
    taskQueue.push(task)
    // 将任务的Promise放入数组
    promiseArray.push(
      downloadFile(task.url, task.path, task.successCallback, task.failCallback)
    )
  })

  // 开始下载
  function startDownload() {
    if (running >= concurrency || taskQueue.length === 0) {
      return
    }

    // 取出队列中的一个任务
    const task = taskQueue.shift()
    // 执行任务
    downloadFile(task.url, task.path, task.successCallback, task.failCallback)
      .then(() => {
        running--
        startDownload()
      })
      .catch((err) => {
        running--
        console.error(err)
        startDownload()
      })

    running++
  }

  // 启动下载任务
  startDownload()

  // 返回Promise数组
  return Promise.all(promiseArray)
}

使用方法

const tasks = [
  {
    url: 'https://example.com/file1.txt',
    path: 'path/to/file1.txt',
  },
  {
    url: 'https://example.com/file2.txt',
    path: 'path/to/file2.txt',
  },
  {
    url: 'https://example.com/file3.txt',
    path: 'path/to/file3.txt',
  },
]

multiDownloadFile(tasks).then((res) => {
  console.log('所有文件下载成功')
}).catch((err) => {
  console.error('下载失败', err)
})

结语

以上就是微信小程序多文件下载的一个简单封装,希望对大家有所帮助。如果您有更好的封装方式,欢迎在评论区分享。