Return 来自 Angular 函数的值

Question

我正在尝试在我的应用程序中建立到后端的连接，但我想显示一个包含我收到的响应的快餐栏，但是当我调用负责该操作的端点时，如果它是否正确，从后面如果我得到它，在端点如果我有响应但是在我调用它的函数中我没有得到它。

我有如下功能，通过按钮调用

按钮功能

sendData(data:any, endPoint:any){
console.log(this.dataService.postForm(data,endPoint))
** I want to get the response here, but i got "undefined"

}

端点：

postForm(dataPost:any, endPointValue:any){
    this.http.post<any>(`${this.BASE_URL}${endPointValue}/`, dataPost).subscribe((response) => {
        console.log(response)
        this.router.navigate(['main']);
    }, err => {
        alert("404")
        this.router.navigate(['main']);
    });
}

这是我想做的事情

postForm(dataPost:any, endPointValue:any){
    this.http.post<any>(`${this.BASE_URL}${endPointValue}/`, dataPost).subscribe((response) => {
        console.log(response)
        this.router.navigate(['main']); *This is not working too
        return response ** I want to catch this response
    }, err => {
        alert("404")
        this.router.navigate(['main']); *This is working
    });
}

Answer 1

postForm(dataPost:any, endPointValue:any){
this.http.post<any>(`${this.BASE_URL}${endPointValue}/`,    dataPost).subscribe((response) => {
    console.log(response)
    this.router.navigate(['main']).then(()=>{
      return response;
     });
    
}, err => {
    alert("404")
    this.router.navigate(['main']);
});

}

Answer 2

return 从服务订阅是不好的做法（就像在组件中存储端点一样）。

我猜这个变体对你有用：

服务：

postForm(postDTO: any): Observable<any> {
  this.http.post<any>(`${this.BASE_URL}/your_endpoint_path`, postDTO)
}

组件：

sendData(data: any) {
  this.dataService.postForm(data).pipe(
    take(1),
    tap(console.log),
    catchError(err => alert(err.message))
  )
  .subscribe(_ => this.router.navigate(['main']))
}

另外，当您不再需要订阅时，不要忘记取消订阅，以防止内存泄漏。在这种情况下，您只需要 1 次发射，所以我在此处添加了“take(1)”管道。

Return 来自 Angular 函数的值

Return value from Angular function

frontend

function

angular