[英]How to manually complete the angular http observable
我正在开发多个并行文件上传功能,能够删除/取消正在进行的 http 调用。 一旦所有呼叫完成/取消,我就会通知消费者。
为此,我使用forkJoin
组合各个 http observables。 但是如果用户点击取消按钮,我不应该等待实际 http 响应的完成。
takeUntill 不会优雅地处理它,因为它只有在从底层源 http 流接收下一个值后才会起作用。
this.uploadFiles().subscribe(data => {
console.warn("Upload completed now!!!!!", data);
});
uploadFiles() {
return forkJoin(
this.files.map(file => // returns array of observable
this.uploadFile(file).pipe( catchError(() => of("Error re-emitted as success to prevent early exit"))))
).pipe(map(() => {
// logic for some user friendly statistic
return data;
}));
}
使用takeUntil
和一个 Subject 作为通知程序来完成 Observables。 您可以将文件 id 传递给 Subject 并在takeUntil
使用filter
来仅取消具有给定 id 的文件的文件上传。
使用defaultIfEmpty
提供一个指示已取消请求的值。 这也可以防止外部forkJoin
在内部空请求完成时立即完成。
private cancelUpload$ = new Subject<number>();
uploadFiles() {
let errorCount = 0, cancelledCount = 0, successCount = 0;
return forkJoin(this.dummyFiles.map(file =>
this.uploadFile(file).pipe(
// react to CANCEL event
map(response => response == 'CANCEL' ? ++cancelledCount : ++successCount),
catchError(() => of(++errorCount))
)
)).pipe(map(() => ({ errorCount, successCount, cancelledCount })));
}
uploadFile(file: any) {
http$.pipe(
...
takeUntil(this.cancelUpload$.pipe(filter(id => id == file.id))), // cancel
defaultIfEmpty('CANCEL'), // provide value when cancelled
)
}
cancelUpload(file: any) {
file.uploadStatus = "cancelled";
this.cancelUpload$.next(file.id) // cancel action
}
将订阅分配给变量并使用按钮取消它:
$http: Subscription;
this.$http = this.http.post(this.uploadUrl, formData, {
reportProgress: false
// observe: 'events',
});
在取消功能中:
cancelUpload(file: any) {
file.uploadStatus = "cancelled";
this.$http.unsubscribe();
}
除了takeUntil
我们还可以使用merge
或race
运算符来处理这种情况。 然而,它并没有改变底层逻辑。
第 1 步:为个人上传创建Subject
file.cancelUpload$ = new Subject();
第 2 步:将此主题与实际的 http 调用合并
如果任何 observable 发出错误,merge 将完成流。 即,当我们从cancelUpload$
主题发出错误时,http 请求将自动取消(查看网络选项卡)。
return merge(file.cancelUpload$, $http.pipe(...
第 3 步:实际取消代码
cancelUpload(file: any) {
file.uploadStatus = "cancelled";
file.cancelUpload$.error(file.uploadStatus);// implicitly subject gets completed
}
第 4 步:在上传错误/成功的情况下完成cancelUpload$
主题
它将确保merge
操作将完成,因为两个流现在都已完成。 因此forkJoin
将收到响应。
参考https://stackblitz.com/edit/angular-zteeql?file=src%2Fapp%2Fhttp-example.ts
uploadFiles() {
let errorCount = 0,cancelledCount = 0, successCount = 0;
return forkJoin(
this.dummyFiles
.map(file =>
this.uploadFile(file).pipe(
catchError(() => of("Error re-emitted as success")) // value doesn't matter
)
)
).pipe(
map(() => { // map would receive array of files in the order it was subscribed
this.dummyFiles.forEach(file => {
switch (file.uploadStatus) {
case "success": successCount++; break;
case "cancelled": cancelledCount++; break;
case "error": errorCount++; break;
}
});
return { errorCount, successCount, cancelledCount };
})
);
}
uploadFile(file: any) {
const formData = new FormData();
const binaryContent = new Blob([Array(1000).join("some random text")], {
type: "text/plain"
}); // dummy data to upload
formData.append("file", binaryContent);
const $http = this.http.post(this.uploadUrl, formData, {
reportProgress: false
// observe: 'events',
// withCredentials: true
});
file.cancelUpload$ = new Subject();
file.uploadStatus = "inProgress";
return merge(
file.cancelUpload$,
$http.pipe(
tap(data => {
file.uploadStatus = "uploaded";
file.cancelUpload$.complete();
}),
catchError(event => {
file.uploadStatus = "error";
file.cancelUpload$.complete();
return throwError("error");
})
)
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.