Как вернуть тело ответа HttpClient из запроса? - PullRequest
Новая
       20

Как вернуть тело ответа HttpClient из запроса?

0 голосов
/ 31 марта 2019

У меня есть компонент, который полагается на ответ 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();
}

приложение-routing.module.ts 

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

Ответы [ 3 ]

2 голосов
/ 31 марта 2019

Во-первых, в service.ts вам не нужно подписываться, вы должны подписаться там, где хотите использовать данные.subscribe метод возвращает Subscription, а не ответ от HTTP API.

Вы можете обновить свой сервисный метод как 

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

pull_categories, метод немедленно вернется с Observable, когда вы подпишетесь на него в своем компоненте (или где-либо), вызов httpбудет выполнен и ответ будет возвращен в вашем subscribe разделе.

2 голосов
/ 31 марта 2019

Вы возвращаете Subscription из своего сервиса (и, следовательно, своего резольвера) вместо того, чтобы возвращать Наблюдаемое. Не подписывайтесь на услуги. И укажите возвращаемые значения, чтобы не выстрелить себе в ногу: 

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

Примечание

  • соблюдение правил именования
  • использование GET для ... получения данных вместо POST
  • что метод определяет, что он на самом деле возвращает
  • использование общей перегрузки метода HttpClient.get (), которая позволяет указать ожидаемый тип тела ответа
  • что наличие полей экземпляра в сервисе неверно (и не нужно).

Прочтите руководство HttpClient и руководство RxJS .

1 голос
/ 01 апреля 2019

Другой способ получить данные из вашего бэкенда - это не подписка на данные, вы также можете вернуть обещание и затем использовать async await в своем компоненте 

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

Это вернет обещание вашему компоненту, которое вы также можете использовать следующим образом: 

async getCategories() {
  try {
    const categories = await this.service.pull_categories();
  } catch (e) {

  }
}
...