Observable不返回api响应

Question

我是棱角分明的新人。 我的项目是angular5，我正在使用PHP创建的Web API。 我的WebApi在postman中给出了响应，但不是来自angular。 我正在使用HttpClient发布请求

    export class GalleryComponent implements OnInit {
      private apiUrl = 'http://localhost:8080/fullpath';
      private response;
      private data=[];

      constructor(private http: HttpClient) {
        this.response =this.getCategory();
      }

      getCategory (): Observable<any> {
        return this.http.post(this.apiUrl,{});
      }

      ngOnInit() {
       console.log(this.response);
      }
  }

我的控制台返回

我需要做些什么来从API获得适当的响应？

Answer 1

你可以尝试这个解决方案

 ngOnInit() {
   this.getCategory().subscribe(response => {
       console.log(response);
    }, err => {
       console.log(err);
    });
}

Answer 2

您需要订阅一个Observable才能使用它。

而不是这个

private http: HttpClient) {
    this.response =this.getCategory();
}

试试这个

private http: HttpClient) {
    this.getCategory().subscribe(result => this.responce = result);
}

Answer 3

使用Observable时，您必须订阅它们。  observable的实际用户需要subscribe（），因为没有  subscribe（）observable根本不会被执行。

subscribe（）返回无法订阅的订阅，但可用于取消订阅。

 getCategory (): Observable<any> {
      return this.http.post(this.apiUrl,{}).subscribe(
         //Do whatever
        (res)=> console.log(res), 
        (error)=> console.log(error)
      );
    }

有关更多信息，请访问Observables的Angular文档： https://angular.io/guide/observables

另外，请记住，大多数订阅都是自行终止的，但使用ngOnDestroy();终止它们总是很好的做法，以避免内存泄漏。

如何使用ngDestroy（）？ 在你的component.ts文件中 确保您有导入

import { Component, OnDestroy, OnInit } from '@angular/core';
export class YourComponent implements OnInit, OnDestroy {
 .
 .
 .
 ngOnDestroy() {
   this.response.unsubscribe();
  }
}

现在，与您的CORS问题相关，请参考之前在stackoverflow上提出的问题： Response to preflight request doesn't pass access control check

Answer 4

大！你可以试试

this.getCategory().subscribe(
    response => console.log(response),
    err => console.log(err)
);

但是使用它的最佳方式是，您需要为POST请求创建服务，并且您只需将其称为im component。像那样

getCategory(data: any): Observable<any> {
 return this._http.post(`url`, JSON.stringify(data))
}

并在组件

中使用它

this.categoryService.getCategory(data).subscribe(
 data => console.log(data),
 err => console.log(err)
)

您可以使用Google DevTools查看是否符合请求，并查看请求响应！在network！如果问题是CORS，您需要在服务器中设置CORS域！ 试试看，告诉我是否有效！希望有所帮助！感谢