ionic 2/3-没有从http get请求得到响应

Question

我正在创建一个 ionic 2 应用程序。对于获取响应，我使用 HttpClient 而非 Http 使用ionic generate provider JobServicesProvider创建提供程序

提供者如下所示：

import { HttpClient, HttpHeaders, HttpParams, HttpErrorResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';

interface DataResponse {
  userId: string;
  id: string;
  title: string;
}

@Injectable()
export class JobServicesProvider {
  constructor(public http: HttpClient) {
    console.log('Hello JobServicesProvider Provider');
  }

  fetchJSONData() {
    return this.http.get<DataResponse>('https://jsonplaceholder.typicode.com/posts/').subscribe(data => {
    },
      (err: HttpErrorResponse) => {
        if (err.error instanceof Error) {
          console.log('Client-side error occured.');
        } else {
          console.log('Server-side error occured.');
        }
      }
    );
  }
}

我正在从我的组件中调用 fetchJSONData() 来获取数据。正确注入提供程序。

代码如下：

import { JobServicesProvider } from './../../providers/job-services/job-services';
import { JobDetailsMainPage } from './../job-details-main-page/job-details-main-page';
import { Component } from '@angular/core';

@Component({
  selector: 'page-new-jobs-page',
  templateUrl: 'new-jobs-page.html',
})
export class NewJobsPage {
  newJobs: any;

  constructor(private jobService: JobServicesProvider) {
    this.toFetchJos();
  }

  toFetchJos(){
    this.newJobs = this.jobService.fetchNewJobs();
    console.log(this.newJobs);
  }
}

我 console.log() 从提供者那里得到响应，我得到了响应，但它没有 JSON 格式的结果。如何获取 JSON 格式的数据？

这是我收到的回复的屏幕截图。谢谢！

Answer 1

目前您的服务方法签名如下：

fetchJSONData(): Subscription;

当您订阅 http.get 返回的 observable 并返回订阅对象时。这就是为什么 console.log 在组件级别打印那个“奇怪”的对象。

你想要的签名是：

fetchJSONData(): Observable<DataResponse[]>;

这可以通过将您的代码更改为以下内容来存档：

fetchJSONData(): Observable<DataResponse[]> {
    return this.http.get<DataResponse[]>('https://jsonplaceholder.typicode.com/posts/');
  }

请注意，返回类型现在是一个发出数组实例的可观察对象，因为您的端点返回一个数组。

现在考虑到您的服务返回 cold observable，您需要在 observable 实例上调用 subscribe 以执行 HTTP 请求：

@Component({
  selector: 'page-new-jobs-page',
  templateUrl: 'new-jobs-page.html',
})
export class NewJobsPage {
  jobs: DataResponse[] = [];
  // variable initialized as empty array to avoid NULL handling

  constructor(private jobService: JobServicesProvider) {
    this.toFetchJobs();
  }

  toFetchJos(){
    this.jobService.fetchNewJobs().subscribe(jobs => this.jobs = jobs);
  }
}

HttpClient API 的基础知识的进一步解释可以在the docs 中找到

Answer 2

这是我的解决方案。我修改了你的代码，但是。试试这个，如果它不起作用，请告诉我。

您在服务方法中订阅，并返回订阅对象

将提供程序修改为如下内容：

import { HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class JobServicesProvider {
  constructor(public http: HttpClient) {
    console.log('Hello JobServicesProvider Provider');
  }

  fetchJSONData() {
    return new Promise(resolve => {
      this.http.get('https://jsonplaceholder.typicode.com/posts/').subscribe(data => {
        resolve(data);
      }, err => {
        console.log(err);
      });
   }
}

和你的组件到下面给出的代码

import { JobServicesProvider } from './../../providers/job-services/job-services';
import { JobDetailsMainPage } from './../job-details-main-page/job-details-main-page';
import { Component } from '@angular/core';

@Component({
  selector: 'page-new-jobs-page',
  templateUrl: 'new-jobs-page.html',
})
export class NewJobsPage {
  newJobs: any;

  constructor(private jobService: JobServicesProvider) {
    this.toFetchJos();
  }

  toFetchJos() {
    this.jobService.fetchJSONData()
      .then(data => {
        this.newJobs = data;
        console.log(this.newJobs);
      });
  }
}