javascript - Angular HttpClient observable 未完成
问题描述
我有以下代码:
// in a service
downloadCSV(): Observable<Blob> {
return this.httpClient.get(`${apiUrl}/a.csv`, {responseType: 'blob'});
}
// in component
onDownloadClicked(event: MouseEvent) {
this.downloading = true;
this.service.downloadCSV()
.pipe(finalize(() => this.downloading = false))
.subscribe(
(data: Blob) => {
console.log(data);
},
(error) => {
console.error(error);
alert('Sorry, something wet wrong. Try again.');
},
() => {
console.log('completed!');
}
);
}
数据已正确记录,但“已完成!” 没有记录,并且永远不会调用 finalize。
编辑:
因此,在进一步调查中,该问题似乎与添加了身份验证标头的拦截器有关。
如果拦截器被绕过(并且在服务器上禁用了身份验证),则 observable 将完成而没有错误。
我不明白为什么会这样。可能与请求被克隆的事实有关?
//interceptor code
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
let scope: string;
// only inject tokens for the following scopes
if (req.url.indexOf('https://graph.microsoft.com') === 0) {
scope = 'https://graph.microsoft.com';
}
else if (req.url.indexOf('https://management.azure.com') === 0) {
scope = 'https://management.azure.com';
}
else if (req.url.indexOf(environment.apiUrl) === 0) {
scope = environment.appId;
}
if (scope) {
return this.authService.getToken(scope).pipe(
switchMap((token) => {
let newReq;
if (token) {
const JWT = `Bearer ${token}`;
newReq = req.clone({
setHeaders: {
Authorization: JWT,
}
});
}
return next.handle(newReq || req);
})
);
}
else {
return next.handle(req);
}
}
解决方案
所以事实证明问题出在我的身份验证服务的 getToken 函数中。我在归还令牌后忘记完成 observable!由于 httpClient.get observable 是通过我的 getToken observable 映射的开关,因此导致我在 onDownloadClicked 中的订阅永远不会完成。
// from my auth service
getToken(resource: string): Observable<string> {
return Observable.create((observer: Observer<string>) => {
this.context.acquireToken(resource, (error, token) => {
if (token) {
observer.next(token);
observer.complete(); // this was missing
}
else {
this.login();
}
});
});
}
推荐阅读
- php - 致命错误:未捕获的错误:调用未定义的方法 PDO::bindParam()
- spring - 如何在 Spring OAuth2 资源服务器中使用自定义 UserDetailService?
- python - 我应该使用哪个损失函数进行形状提取?
- python - 需要帮助使用 NumPy 优化字符数组搜索
- android - 使 TextView 显示为菜单项
- typescript - 在静态和公共方法中返回“this”时的类继承
- sql - Hibernate 以单对多关系保存数据
- python - Python Beautiful Soup 4 从 Cricinfo 抓取 IPL 排行榜
- javascript - 为什么我的数据在自动为其创建空间时不显示
- signalr - 尝试同时连接多个用户时出现signalR websocket错误