http.get() 不返回 observable答案

【问题标题】：http.get() does not return an observablehttp.get() 不返回 observable
【发布时间】：2019-11-13 07:03:10
【问题描述】：

注意：问题肯定是 ionViewDidLoad() 没有被执行，因为 http.get 确实得到了一个 observable。 我试图在执行请求时获取 observable，以便稍后获得其 json 响应，但我没有收到错误消息，浏览器控制台中也没有显示任何内容。我不知道为什么它没有返回任何东西。

我尝试了很多网址并检查了很多次导入。 console.log not pasting the data 主页.ts


    import { ServicioService } from '../servicio.service';
    import { Observable } from 'rxjs';
    import { HttpClient } from '@angular/common/http';
    ...
    ionViewDidLoad(){
          const hola = this.servicio.goWiki(this.userInput).
          subscribe((response) => {
            console.log(response);
           });
        }

service.service.ts


    import { Injectable } from '@angular/core';
    import { map } from 'rxjs/operators';
    import { HttpClient } from '@angular/common/http';
    import { Observable } from 'rxjs';

    @Injectable()
    export class ServicioService {

        constructor(public http: HttpClient) {
            console.log('goin!');
        }

        goWiki(userInput): Observable<any>{
            return this.http.get('https://www.reddit.com/r/gifs/top/.json?limit=105sort=hot');
        }

app.module.ts


    import { ServicioService } from './servicio.service';
    import { HttpClientModule } from '@angular/common/http';

    imports: [HttpClientModule, BrowserModule, IonicModule.forRoot(), AppRoutingModule, ComponentesModule],
      providers: [
        ServicioService,...

我只是希望得到一个 observable 能够读取它并从中提取特定数据。

【问题讨论】：

请提供您的问题的最小复制，最好在 stackblitz 中
你确定ionViewDidLoad () 被调用了吗？请查看此帖子：[stackoverflow.com/questions/40339833/… 未被调用）
也许您可以使用控制台在“ionViewDidLoad()”中添加打印消息。记录检查该方法是否被执行
http.get 返回一个 observable：Observable，而不是 Observable，查看这个页面：codecraft.tv/courses/angular/http/http-with-observables
@NicuVlad 我放了一个 console.log() 但没有返回任何东西，所以它没有被执行

标签： angular typescript rxjs ionic4 angular-httpclient

【解决方案1】：

使用 Ionic 4，在 Angular 中，您不再拥有 ionViewDidLoad 生命周期挂钩。请改用标准的 Angular ngOnInit 钩子。

见https://medium.com/@paulstelzer/ionic-4-and-the-lifecycle-hooks-4fe9eabb2864

Ionic 4 中的生命周期

[...]

除了ionViewDidLoad（因为它和ngOnInit一样）和两个导航守卫Ionic 3的所有生命周期钩子仍然可用

【讨论】：

谢谢，就是这样！我什至没有想过。

【解决方案2】：

您正在访问此 URL：'https://www.json.org'

这里可能有很多问题。其中之一可能是 CORS。

如果您的网络应用程序不允许 CORS（跨域请求共享），那么您将不会从调用中得到响应。调用本质上被浏览器阻止（检查您的浏览器）。如果您查看网络日志，第一个调用将是 OPTIONS 而不是 get。本质上，网站应该返回允许调用的 Http 操作动词。

尝试调用您机器上的本地 iis 服务器应用程序或与 Web 应用程序位于同一域的任何机器，http.get 将起作用。

【讨论】：

链接错了，我改了。我认为它也不是 .get ，因为如果我将 ionViewDidLoad 放在构造函数中：constructor( navcntrlr: NavController, private alertcontroller: AlertController, public servicio: ServicioService) { this.ionViewDidLoad();} 我得到数据：{kind: "Listing", data: {…}} 这就是我需要的，我想。但是，ionViewDidLoad() 不应该在那里执行，这是废话，对吧？

【解决方案3】：

您的组件似乎缺少构造函数中的 http，并且您试图以错误的方式调用服务。

你不需要把它放在方法中的一个名副其实的里面。

【讨论】：

【解决方案4】：

**service.ts**
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

 constructor(public http: HttpClient) { }

getFirst(): Observable<any> {

return this.http.get('https://www.reddit.com/r/gifs/top/.json?limit=105sort=hot').pipe(map(res => {
  return res;
}));

}

【讨论】：