http.get()不返回可观察到的

时间:2019-07-02 15:27:24

标签: angular typescript rxjs ionic4 angular-httpclient

注意:问题肯定是未执行ionViewDidLoad()导致http.get确实可观察到。 我试图在执行请求时获得可观察到的信息,以便稍后获得其 json 响应,但是我没有收到错误,并且浏览器的控制台中也未显示任何内容。我不知道为什么它什么都不返回。

我尝试了许多网址,并多次检查了导入。 console.log not pasting the data home.page.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);
           });
        }

servicio.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,...

我只是希望能得到一个可观察的东西,以便能够读取它并从中提取特定数据。

4 个答案:

答案 0 :(得分:1)

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

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

  

离子4的生命周期

     

[...]

     

除了ionViewDidLoad(因为它与ngOnInit相同)和两个导航卫兵之外,Ionic 3的所有Lifecycle钩子仍然可用

答案 1 :(得分:0)

您正在使用以下URL:' https://www.json.org '

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

如果您的Web应用程序不允许CORS(跨域请求共享),则您将无法从呼叫中获得响应。该呼叫实质上被浏览器阻止(请检查浏览器)。如果您查看网络日志,第一个电话将是OPTIONS而不是get。本质上,网站应该返回将被允许调用的Http操作动词。

尝试在您的计算机或与该Web应用程序位于同一域中的任何计算机上调用本地iis服务器应用程序,即可使用http.get。

答案 2 :(得分:0)

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

您无需将其放入该方法的验证中。

答案 3 :(得分:0)

**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;
}));

}