@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 выполняется не в очереди:
Картинка загружена
Все готово
Картинка готова

Спасибо!
  • Вопрос задан
  • 81 просмотр
Решения вопроса 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();
    };
  }); 
},

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

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

Войти через центр авторизации
Похожие вопросы
IBC Human Resources Екатеринбург
от 80 000 руб.
Apsis Ростов-на-Дону
от 85 000 руб.
23 марта 2019, в 17:57
2000 руб./за проект
23 марта 2019, в 16:34
700 руб./за проект
23 марта 2019, в 15:42
400 руб./в час