如何从请求中返回HttpClient响应体？

Question

我有一个依赖于其内容的API响应的组件。我已经设置了解析器，但在我的数据准备好之前它仍然会返回。

如何使我的pull_categories()功能等到收到响应主体然后返回？而不是返回一个空对象，因为它不会等待甚至在我的情况下调用它。

---

service.ts

private _categories = [];

constructor(private http: HttpClient) { }

pull_categories() {
    this.http.post('https://myapi.com/something', null)
    .subscribe(
        data => {
            this._categories = data['response'];
            return this._categories;
        }
    );
}

---

component.ts

categories = [];

constructor(private route: ActivatedRoute) { }

ngOnInit() {
    this.route.data.subscribe(
        (data: Data) => {
            this.categories = data.categories;
        }
    );
}

---

resolver.ts

constructor(private categoriesService: CategoriesService) { }

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any {
    return this.categoriesService.pull_categories();
}

---

APP-routing.module.ts

{
    path: '',
    component: HomeComponent,
    resolve: {categories: CategoriesResolverService}
}

Answer 1

首先，在service.ts中，您不需要订阅，您应该订阅您想要实际使用数据的位置。 subscribe方法返回Subscription，而不是http api的响应。

您可以将服务方法更新为

pull_categories(): Observable<any> {
    return this.http.post('https://myapi.com/something', null);
}

pull_categories方法将立即返回Observable，当您在组件（或任何地方）订阅它时，将执行http调用并在subscribe部分返回响应。

Answer 2

你从你的服务（以及你的解析器）返回一个Subscription，而不是返回一个Observable。不要订阅服务。并指定返回值，以避免自己在脚下射击：

getCategories(): Observable<Array<Category>> {
  return this.http.get<Something>('https://myapi.com/something').pipe(
    map(something => something.response)
  );
}

注意

• 尊重命名惯例
• 使用GET来...获取数据，而不是POST
• 该方法定义了它实际返回的内容
• HttpClient.get（）方法的泛型重载的使用，它允许指定响应主体的预期类型
• 在服务中具有实例字段是错误的（并且是不必要的）。

阅读qazxsw poi指南和qazxsw poi指南。

Answer 3

从后端获取数据的另一种方法是订阅数据，而不是订阅数据，然后在组件中使用async await

HttpClient

这将返回对组件的承诺，您还可以通过以下方式使用该承诺：

RxJS