如何解决http post Observable / subscribe 中的角度路由
我正在尝试将用户定向到 response
请求的 httpClient.post
内的仪表板。页面导航“很好”(它显示在 url 栏上)但组件 DOM 的大多数元素没有加载。
这是service.ts中的帖子:
import { Injectable } from '@angular/core';
import { HttpClient,HttpErrorResponse,HttpHeaders } from '@angular/common/http';
import { Observable,throwError } from 'rxjs';
import { retry,catchError } from 'rxjs/operators';
const baseUrl = 'https://my-api.com';
@Injectable({
providedIn: 'root'
})
export class ApiService {
constructor(private httpClient: HttpClient) { }
postSomeData(data): Observable<any> {
return this.httpClient.post(baseUrl + '/postSomeData',data)
}
这就是我在组件中使用它的方式:
this.apiService.postSomeData(params)
.subscribe(
async response => {
response = await response;
if(response.response == 'success'){
// success logic
}else{
// failure message
}
},error => {
// error logic
},() => {
// window.top.location.href = "https://" + window.location.host;
this.router.navigate(["/dashboard"]);
});
当 subscribe
完成并且路由器导航到仪表板时,这是我得到的仪表板 DOM 的不完整负载:
如果我将导航 (this.router.navigate(["/dashboard"]);
) 放在订阅之外的任何位置,或者我手动或以编程方式 (window.top.location.href = "https://" + window.location.host;
) 重新加载页面,则页面 (DOM) 加载得很好:
那么如何在 subscribe 内部实现导航并拥有仪表板组件的完整 DOM 负载?很明显,订阅中的 complete
函数对我不起作用。完整功能中注释掉的整页重新加载 (window.top.location.href = "https://" + window.location.host;
) 有效,但不是角度方式。
解决方法
从 subscribe
返回的第一个响应在 HTTP 方法成功时执行,因此无需检查响应。
出现错误时执行第二个响应。
因此,实际上您只需执行以下操作就可以大大简化您的代码:
this.apiService.postSomeData(params)
.subscribe(
() => {
// success logic,HTTP statuscode 20X
},() => {
// error logic,when a HTTP error has been thrown
},() => {
// executed when the HTTP function has been completed,doesn't matter whether success or error
this.router.navigate(["/dashboard"]);
});
我认为问题与 async
和 if
子句有关。没有理由在那里使用 async
和 if
子句。这应该可以解决它。
您始终可以在代码中使用 debugger
来查看函数何时执行。如果您不完全了解 subscribe
的哪个部分何时被执行,我建议您这样做几次。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。