Javascript 如何在vue js中处理下载队列

Javascript 如何在vue js中处理下载队列,javascript,vue.js,Javascript,Vue.js,我正在尝试找出如何在我的vue应用程序中创建一个简单的下载队列。我希望当用户单击开始下载时,文件信息被添加到队列中,并按照队列的顺序自动处理 我现在已经有了这段代码,但我一直在思考如何在一次下载完成后循环队列来处理它 methods: { startDownload() { //here I'm pushing the downloads into the queue this.downloadQueue.push({ programInfo: this.pr

我正在尝试找出如何在我的vue应用程序中创建一个简单的下载队列。我希望当用户单击开始下载时,文件信息被添加到队列中,并按照队列的顺序自动处理

我现在已经有了这段代码,但我一直在思考如何在一次下载完成后循环队列来处理它

  methods: {
    startDownload() {
      //here I'm pushing the downloads into the queue
      this.downloadQueue.push({ programInfo: this.programInfo, url: this.videoURL })
    },
    processDownloadQueue() {
      //here I want to implement the download queue processing
      const m3u8 = new M3U8()
      this.isActive = true
      const download = m3u8.start(this.videoURL, {
        filename: this.programInfo.name+'.mp4',
        returnBlob: false
      })

      download.on('progress', (progress) => {
        this.$refs.progress.style.width = Math.round(progress.percentage) +"%"
        this.downloadProgress = Math.round(progress.percentage)      
      }).on('finished', () => {
        this.isComplete = true
        this.downloadProgress = 100
        setTimeout( () => {
          console.log('Data update...')
          this.isActive = false
          this.isLoading = true
          browser.runtime.sendMessage({status: 'refresh'})
        },2000)
      }).on('error', (message) => {
        console.error(message) 
      }).on('aborted', () => {
        console.log("Download aborted")
      })
    }
有什么建议吗