Angular 使用 TypeScript - 如何在可观察的回调中处理业务逻辑？

Question

我正在尝试使用 Angular HttpClient 调用来获取一些数据和 return 一些成功的东西：

    return this.http.post('api/my-route', model).subscribe(

        data => (
            this.data = data;
            return $window.location = ReturnUrlService.getAbsolute('/my-other-route');
        )
    )

为什么我不能这样做？我的应用程序是 Angular 4.3 with TypeScript 2.6.2 我的理解是箭头函数应该等效于此回调：

function(data) {
        this.data = data;
        return $window.location = ReturnUrlService.getAbsolute('/my-other-route');
}

...我对待 'data' 就像它在 JQuery AJAX 中作为 'success' 回调一样工作。订阅是否以某种方式仅限于设置 class 中的属性值？我的箭头功能有什么问题？我知道我缺少一些基本的东西！

Answer 1

如果 "body" 是表达式，则只能使用 ()。您的 "body" 是两个语句：

return this.http.post('api/my-route', model).subscribe(
    data => (
        this.data = data;
        return $window.location = ReturnUrlService.getAbsolute('/my-other-route');
    )
)

应该是：

return this.http.post('api/my-route', model).subscribe(
    data => {                                                    // <==== changed this line
        this.data = data;
        return $window.location = ReturnUrlService.getAbsolute('/my-other-route');
    }                                                            // <==== changed this line
)

`return` 语句

看来您只想执行赋值，而不是 return 任何值。如果是这种情况，只需 从最后一条语句中删除 return 关键字。

另一方面，如果您确实也想 return 将该值传递给该函数的调用者，请不要使用 subscribe, but other function that will just transform the Observable, such as map:

public myMethod(): Observable<any> {
  // ... create the model variable
  return this.http.post('api/my-route', model).map(
    data => {
        this.data = data;
        return $window.location = ReturnUrlService.getAbsolute('/my-other-route');
    }
  )
}

当然记得在任何调用的地方订阅结果myMethod:

public someOtherMethod() {
  return this.myMethod().subscribe(stuff => console.log(stuff));
}

Angular 使用 TypeScript - 如何在可观察的回调中处理业务逻辑？

Angular with TypeScript- how do I handle business logic within an observable callback?

javascript

observable

typescript

angular

angular-httpclient

`return` 语句

Angular 使用 TypeScript - 如何在可观察的回调中处理业务逻辑？

Angular with TypeScript- how do I handle business logic within an observable callback?

javascript

observable

typescript

angular

angular-httpclient

return 语句

`return` 语句