Блог

Я столкнулся с проблемой и надеялся, что кто-нибудь сможет мне помочь. Мне нужно реализовать загрузку фрагмента файла с помощью axios, и мне нужно отправлять фрагменты на мой сервер один за другим. Таким образом, новый запрос axios должен выполняться после завершения предыдущего. Теперь запросы отправляются не по порядку. мой код приведен ниже:

   addChunk(file) { // I receive file from my file uploader 
  this.getBase64(file[0].file).then((base64) => {
    this.convertChunks = base64.replace(base64.substring(0, base64.search(',')   1), '')
    this.convertedArr = this.convertChunks .match(/.{1,500000}/g) //here I convert it into base64 with helper function
  })
  for (let i in this.convertedArr) {
    if (this.uploadSuccess === false) return null
      axios({
        url: `${domain}`,
        method: 'POST',
        data: [this.convertedArr[i]]
      })
        .then(() => {
          if (parseInt(i) === this.convertedArr.length - 1) {
            this.nextFunction()  //after the last chunk is sent successfully, i need to call another function
          }
        })
        .catch((error) => {
          console.log(error)
        })
  }
},
 

Используйте async / await синтаксис, позволяющий вашему методу ожидать завершения axios запроса.

Также переключитесь на for...of вместо for...in . Последний используется для перебора перечислимых свойств объекта, и хотя его можно использовать в массиве, его следует избегать, когда важен порядок.

Разверните for...of , выполнив цикл над this.convertedArr.entries() . Это создаст массив с [ index, value ] для каждого элемента в массиве, что позволит вам использовать индекс.

С try...catch...finally помощью вы можете перехватывать любые ошибки, которые может вызвать ожидаемый вызов функции. finally Часть предназначена для того, чтобы убедиться, что эта часть вызывается, если запрос был успешным или неудачным.

 async addChunk(file) { // I receive file from my file uploader 
  this.getBase64(file[0].file).then((base64) => {
      this.convertChunks = base64.replace(base64.substring(0, base64.search(',')   1), '')
      this.convertedArr = this.convertChunks.match(/.{1,500000}/g) //here I convert it into base64 with helper function
  })

  for (const [ i, item ] of this.convertedArr.entries()) {
    if (this.uploadSuccess === false) return null

    try {
      await axios({
        url: `${domain}`,
        method: 'POST',
        data: [item]
      });
    } catch(error) {
      console.log(error)
    } finally {
      if (parseInt(i) === this.convertedArr.length - 1) {
        this.nextFunction();
      }
    }
  }
}