Question

我正在创建一个离子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

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

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

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

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

Answer 2

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

fetchJSONData(): Subscription;

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

您想要的签名是：

fetchJSONData(): Observable<DataResponse[]>;

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

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

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

现在考虑到您的服务返回 冷可观察 ，您需要在可观察实例上调用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

离子2 / 3-没有从http获取请求得到响应

2 个答案: