Json 如何使用HttpClientModule正确执行GET请求

Json 如何使用HttpClientModule正确执行GET请求,json,angular,typescript,get,httprequest,Json,Angular,Typescript,Get,Httprequest,我在向后端执行一个简单的get请求时遇到问题,该请求返回一个JSON。当我在我的代码中执行这个get请求时,它返回一个可观测值,我通过subscribe方法直接将其分配给一个变量。但是,它仅在该方法中被分配和使用,在其他任何地方都未定义 api服务获取方法: public getAllProcessCategories() { return this.http.get(this.apiURL + 'typeOne=PROCESSCATEGORIES&typeTwo=PROCES

我在向后端执行一个简单的get请求时遇到问题,该请求返回一个JSON。当我在我的代码中执行这个get请求时,它返回一个可观测值,我通过subscribe方法直接将其分配给一个变量。但是,它仅在该方法中被分配和使用,在其他任何地方都未定义

api服务获取方法:

public getAllProcessCategories() {
     return this.http.get(this.apiURL + 'typeOne=PROCESSCATEGORIES&typeTwo=PROCESSCATEGORIES');
  }
api的使用:

import { ApiService } from './../api.service';
import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { ProcessCategory } from './process-category';



@Component({
  selector: 'app-process-category',
  templateUrl: './process-category.component.html',
  styleUrls: ['./process-category.component.css']
})
export class ProcessCategoryComponent implements OnInit {

  processCategories = [];

  constructor(private api: ApiService) {
  }


  ngOnInit(): void {
    this.fillProcessCategories();
    this.printAfterRequest();
  }

  fillProcessCategories() {
    this.api.getAllProcessCategories().subscribe(data => {
      this.processCategories = data['entities'];
      console.log(this.processCategories);
    });
  }

  printAfterRequest() {
    for (const category of this.processCategories) {
          console.log(category);
    }
  }
}

我知道是的,因为我想在httpRequest完成之前得到结果。那么,在angular 4中执行get请求的最佳方式是什么呢?该请求返回一个JSON,然后解析这个JSON并将其映射到一个类,以便在我的组件中使用?

稍微调整一下API方法以

return this.http.get(this.apiURL+ 'typeOne=PROCESSCATEGORIES&typeTwo=PROCESSCATEGORIES')
                .map(res => {
                    return res.json();
                })
                .catch(this.handleError);
然后将printAfterRequest移动到订阅回调

fillProcessCategories() {
    this.api.getAllProcessCategories().subscribe(data => {
      this.processCategories = data['entities'];
      this.printAfterRequest();
      console.log(this.processCategories);
    });
  }

我建议您阅读一点关于可观察和异步调用是如何工作的。现在printAfterRequest方法将在fillProcessCategories有机会完成之前发生。亲爱的Vitalii,由于它们更改为Angular 4.3,.json映射不再需要,也不可用,因为json现在默认作为对象返回。而且我的processCategories仍然只在回调中填充,之后找不到。您是否尝试将它们绑定到模板?它们应该在异步调用完成后可用。在ngOnInit中,它们不会立即可用,因为异步请求需要时间来完成和加载。感谢您的快速回答和帮助。当我为它设置模板时,我确实得到了值。所以现在我的问题是,我是以这种方式正确工作,还是有更好的方式获取请求并在组件中处理它们?是的,您的方式是正确的。但我建议为每个API控制器前缀提供单独的服务,e、 g.用于所有/用户调用的users-api.service。我还有api-base.service,它包含一般错误处理和getUrl方法,返回baseapirl+{api_PATH}。非常感谢您的帮助和提示