複数の順次API呼び出し（角度4）

Question

私はイメージオブジェクトの配列を持っています。

console.info('gallery', galleryArray); 

この配列の長さは異なっていてもよいです。私はこの配列のすべての項目についてPOST要求をしなければなりません。次のリクエストは、前のリクエストが終了した後にのみ実行する必要があります。

だから私はこのような観察可能なリクエストの配列を作ってみました：

let requests: Observable<Response>[] = []; 
    galleryArray.forEach((image) => { 
    requests.push(this._myService.uploadFilesImages(image)); 
    }); 

    console.info(requests); 

私のサービスは、次のようになります。

uploadFilesImages(fileToUpload: any): Observable<any> { 
    const input = new FormData(); 
    input.append('image', fileToUpload); 
    return this.uploadHttp.post(`${this.endpoint}`, input) 
    .map(
    (res: Response) => res.json() 
); 
} 

質問はこれらの要求を実行する方法でありますすべてのapiコールは、前回の終了後にのみ移動するようにします。助けてください。私はAngularが初めてです。

Answer 1

：

例

const apiRoot = 'https://jsonplaceholder.typicode.com/'; 
const urls = []; 
for (let i = 0; i < 500; i++) { 
    urls.push(apiRoot + 'posts/' + (i + 1)); 
} 
Observable.of(...urls) 
    .concatMap((url: string) => this.http.get(url)) 
    .subscribe((result) => console.log(result)); 

観測可能で反復電流が完了した後concatMapオペレータのみが発光します。個々のコールの結果は、subscribeブロックで取得します。あなたの特定のケースで

：

Observable.of(...galleryArray) 
    .concatMap((image) => this._myService.uploadFilesImages(image)) 
    .subscribe((result) => console.log(result)); 

Answer 2

あなたは約束を決意して、その目的のためにasync/awaitを使用することができます。

let requests: Observable<Response>[] = []; 
galleryArray.forEach((image) => { 
    await new Promise(resolve => { 
     this._myService.uploadFilesImages(image) 
      .subscribe(result => { 
       requests.push(result);   
       // resolve the promise once we have a result 
       resolve(); 
      }); 
    });  
}); 

// This will only be called once all the api calls have been made 
console.info(requests); 

あなたはこのコードを実行されている方法の後ろasyncを入れていることを確認します。同様の質問のためにanswerにリンクしてください。あなたがconcatMapオペレータを探している