aws s3 загрузка изображения корзины в angular6, имеющая проблему взамен

Question

Я использую этот подход для загрузки изображений в корзину AWS S3: https://grokonez.com/aws/angular-4-amazon-s3-example-how-to-upload-file-to-s3-bucket

Это прекрасно работает как отдельная задача, но, насколько я полагаюсь, на результат, который приходит чуть позже из-за асинхронностиповедение может быть.Я хотел бы, чтобы следующее задание было выполнено сразу после подтверждения.

upload() {
      let file: any;
      // let urltype = '';
      let filename = '';
      // let b: boolean;
      for (let i = 0 ; i < this.urls.length  ; i++) {
        file = this.selectedFiles[i];
        // urltype = this.urltype[i];
        filename = file.name;
        const k = uuid() + '.' + filename.substr((filename.lastIndexOf('.') + 1));
        this.uploadservice.uploadfile(file, k);
        console.log('done');
        // console.log('file: ' + file + ' : ' + filename);
        // let x = this.userservice.PostImage('test', file);
         // console.log('value of ' + x);
      }
      // return b;
     }

служба загрузки файлов:

bucket.upload(params, function (err, data) {
      if (err) {
        console.log('There was an error uploading your file: ', err);
        return false;
      }
      console.log('Successfully uploaded file.', data);
      return true;
    }).promise();
  }

Здесь готово - выполняется выполнение до загрузки файла.

Answer 1

Я думаю, вам следует проверить учебник по асинхронному программированию и попытаться поиграть с несколькими примерами, используя простые тайм-ауты, чтобы освоить его, а затем перейти к более сложным вещам, таким как s3 и aws.

Вот как я предлагаю вам начать свое путешествие:

1) Изучите основные концепции асинхронного программирования с использованием чистого JS https://eloquentjavascript.net/11_async.html

2) Поиграйте с собственными примерами, используя обратные вызовы и тайм-ауты

3) Заменить обратные вызовы на Обещания

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises

4) Сделать это "угловым" способом с наблюдаемыми rxjs (аналогично JS Observable)

http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html

PS: Конкретнее:

Ваш код не выполняется, поскольку следующая строка выполняется асинхронно.Таким образом, код вызовет вашу функцию uploadfile и сразу же продолжит выполнение без ожидания.

this.uploadservice.uploadfile(file, k);

Как только вы выполните все пункты, описанные выше, вы сможете сделать что-то вроде этого (используя обещание):

this.uploadservice.uploadfile(file, k)
  .then( result => {
     console.log('Upload finished');
   })
  .catch(error => {
     console.log('Something went wrong');
  });