时间戳

首页 > 解决方案 > 如何从请求中返回 HttpClient 响应正文？

angular - 如何从请求中返回 HttpClient 响应正文？

问题描述

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

如何让我的pull_categories()函数等到收到响应正文然后返回？而不是返回一个空对象，因为它不会等待甚至在我下面的例子中调用它。

服务.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;
        }
    );
}

组件.ts

categories = [];

constructor(private route: ActivatedRoute) { }

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

解析器.ts

constructor(private categoriesService: CategoriesService) { }

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

应用程序路由.module.ts

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

标签： angulartypescriptangular-httpclientangular-resolver

解决方案

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

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

笔记

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

阅读HttpClient指南和RxJS quide。

推荐阅读