Angular сделать http получить запрос затем с данными из запроса на получение сделать запрос на размещение - PullRequest
Новая
       4

Angular сделать http получить запрос затем с данными из запроса на получение сделать запрос на размещение

0 голосов
/ 20 марта 2020

Я хочу загрузить несколько изображений на AWS S3.

Сначала загружаю изображения и показываю пользователю предварительный просмотр изображений, затем внутри для l oop Я каждый раз запускаю функцию uploadFilesSimulator для загрузки каждого изображения. 

  prepareFilesList(files: Array<any>) {
  for (const item of files) {
  item.progress = 0;
  this.files.push(item);

  const reader = new FileReader();
  reader.onload = (filedata) => {
    item.url = reader.result + '';
  }

  reader.readAsDataURL(item);

  this.uploadFilesSimulator(item);
}

}

Сначала я получаю запрос на мой node js API. В результате ключ и URL. Затем, после получения URL-адреса, я запускаю запрос put, чтобы добавить изображение к этому URL-адресу. 

  uploadFilesSimulator(file: any) {
this.formService.getUploadUrl().subscribe(data => {
  let upload = this.formService.uploadImage(data.url, file).subscribe(data => {
    console.log(data)
  }, err => console.log(err));
});

Это работает, но я хочу избежать вложенных подписок. Какой оператор RX js я должен использовать?

1 Ответ

1 голос
/ 20 марта 2020

Три оператора могут сделать это: switchMap, mergeMap и concatMap. Более подходящим для вашего случая является mergeMap, хотя для вашего конкретного случая не будет никакой разницы, потому что this.formService.getUploadUrl() будет выдавать только одно событие.

Для более подробной информации, я предлагаю этот отличный веб-сайт : https://rxmarbles.com/

Вы можете использовать его следующим образом: 

uploadFilesSimulator(file: any) {
    return this.formService.getUploadUrl().pipe(
        mergeMap(data => this.formService.uploadImage(data.url, file))
    );
}
...