@AkifPetrov

Как организовать async/await совместро с axios и FileReader?

Привет, у меня есть примерно такой код:
async enableCropper() {
	await this.preview({});
	console.log('Все готово');
},

preview(params) {
	return this.axios
	    .post('/api/images/preview', params, {
	        responseType: 'blob'
	    })
	    .then(response => {
	        console.log('Картинка загружена');
	        var reader = new window.FileReader();
	        reader.readAsDataURL(response.data); 
	        reader.onload = function() {
	            this.$refs.cropper.replace(reader.result);
	            console.log('Картинка готова')
	        }.bind(this)
	    })
	;
}

Подскажите, как огранизовать очередь так что бы console.log('все готово'); выполнялся последним.
Сейчас reader.onload выполняется не в очереди:
Картинка загружена
Все готово
Картинка готова

Спасибо!
  • Вопрос задан
  • 60 просмотров
Решения вопроса 1
FFxSquall
@FFxSquall
Могу писать код, могу не писать
preview(params) {
    return new Promise((resolve) => {
        this.axios
            .post('/api/images/preview', params, {
                responseType: 'blob'
            })
            .then(response => {
                console.log('Картинка загружена');
                var reader = new window.FileReader();
                reader.readAsDataURL(response.data);
                reader.onload = function() {
                    this.$refs.cropper.replace(reader.result);
                    console.log('Картинка готова')
                    resolve();
                }.bind(this)
            })
    });
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
rockon404
@rockon404
Frontend Developer
async enableCropper() {
  await this.preview({});
  console.log('Все готово');
},

async preview(params) {
  const { data } = await axios.post('/api/images/preview', params, {
    responseType: 'blob',
  });
  await this.loadImage(data);
},

loadImage(src) {
  return new Promise(resolve => {
    const reader = new window.FileReader();
    reader.readAsDataURL(src); 
    reader.onload = () => {
      this.$refs.cropper.replace(reader.result);
      console.log('Картинка готова');
      resolve();
    };
  }); 
},

И хорошо бы обработку ошибок добавить.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Digital Sharks Казань
от 60 000 до 65 000 руб.
CS Money Санкт-Петербург
от 120 000 до 150 000 руб.
Ingram Micro Cloud Москва
от 170 000 руб.