如何为angular应用程序获取正确的API数据？

Question

我用nodejs，express和mongodb创建了一个API服务。当我用邮差甚至在浏览器上测试时，它都可以正常工作。但是，当我尝试从angular应用程序执行相同操作时，它会给出奇怪的响应。

这是我向邮递员提出的获取请求：

api服务的角度代码：

url = 'http://localhost:3000';
getList() {
  return this.http.get(this.url);
}

当我在app.component.ts中执行以下操作

console.log(JSON.stringify(this.taskapi.getList()));

这就是我在控制台中看到的内容：

{"_isScalar":false,"source":{"_isScalar":false,"source":{"_isScalar":false,"source":{"_isScalar":true,"value":{"url":"http://localhost:3000","body":null,"reportProgress":false,"withCredentials":false,"responseType":"json","method":"GET","headers":{"normalizedNames":{},"lazyUpdate":null,"headers":{}},"params":{"updates":null,"cloneFrom":null,"encoder":{},"map":null},"urlWithParams":"http://localhost:3000"}},"operator":{"concurrent":1}},"operator":{}},"operator":{}}

我想要和邮递员一样的角度回应。我该怎么办？

Answer 1

您应该订阅可观察对象以获得结果。旁观者是懒惰者，除非您订阅，否则不会发起呼叫

    getList() {
      return this.http.get(this.url);
    }
    list:any;
    this.taskapi.getList().subscribe((response)=>{
         this.list = response;
        //here you will get the response
    });

您还可以使用角度 async 管道，该管道将自动为您预订和退订

    <div *ngFor='let item of yourObservableList | async'>

    </div>

Answer 2

您的getList（）函数返回一个Observable，这就是this.http.get返回的结果。

只需订阅Observable并打印响应，如下所示：

this.taskapi.getList().subscribe(
  res =>
  {
    console.log(res);
  },
  err =>
  {
    /*Error handling*/
  }
)