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

Question

[AkifPetrov]

Привет, у меня есть примерно такой код:

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 выполняется не в очереди:

Картинка загружена
Все готово
Картинка готова

Спасибо!

Answer 1

[Михаил]

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)
            })
    });
}

Answer 2

[Антон Спирин]

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();
    };
  }); 
},

И хорошо бы обработку ошибок добавить.