我有一组图像对象。
console.info('gallery', galleryArray);
这个数组的长度可以不同。我必须对该数组的每个项目发出 POST 请求。下一个请求必须在上一个请求完成后才能执行。
所以我尝试像这样创建一个 Observable 请求数组:
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 的新手。
最佳答案
您正在寻找 concatMap
运算符:
例子
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
block 中获得各个调用的结果。
在您的特定情况下:
Observable.of(...galleryArray)
.concatMap((image) => this._myService.uploadFilesImages(image))
.subscribe((result) => console.log(result));
关于angular - Angular 4 中的多个顺序 API 调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45814808/