Question

我试图在http-service文件中触发错误回调，如果存在任何错误，我将从本地服务调用数据。我将此返回到名为app-config-service的服务文件。

http-service.ts的代码：

import { Injectable } from '@angular/core';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';
import { MockService } from './mock-service';

@Injectable()
export class HttpRestService {

    constructor(private http:Http,mockService:MockService ) {

    }

    get(pUrl) {
        return this.http.get(pUrl).subscribe(
             function(response) { res => response.json()},
             function(error) { res => this.mockService.userMethods(pUrl) },
             function() { console.log("the subscription is completed")}
        );
    }

    post(pUrl, pData) {
        return this.http.post(pUrl, pData).map(res => res.json());
    }
}

app-config-service.ts的代码：

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { HttpRestService } from './http-service';
@Injectable()
export class AppConfigService {
    constructor(private httpRestService: HttpRestService) {
    }
    testAPIMethod(pUrl) {
        return this.httpRestService.get(pUrl).map(res => res);
    }
}

根据我的知识，订阅用于操纵收到的结果，而map用于直接复制数据而不做任何更改。

所以我在这些情况下使用了subscribe和map。

我不知道为什么会因为我是打字稿的新手而触发错误。

错误如下：

typescript: E:/ActiveProjects/IonBase/src/services/app-config-service.ts, line: 14
        Property 'map' does not exist on type 'Subscription'.

  L13:  testAPIMethod(pUrl) {
  L14:      return this.httpRestService.get(pUrl).map(res => res);

我该怎么做才能解决这个问题？

Answer 1

我为您的代码创建了一个实例，并添加了一些修改以使您的工作正常运行。在这里，您可以看到完整示例：https://stackblitz.com/edit/angular-luxw4a 打开控制台，然后单击按钮。

您应该在get - 方法和testAPIMethod - 方法中更改处理方式。因为这个功能的处理是相反的。

现在解释：

在HttpRestService中，您应该只创建API调用。我建议你使用Observables进行API调用。以下是HttpRestService：

的工作示例

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';

@Injectable()
export class HttpRestService {

  constructor(private http: Http) {}

  get(pUrl: string): Observable<any> {
    return this.http
    .get(pUrl).map((res: Response) => res.json());
  }

  post(pUrl, pData): Observable<any> {
    return this.http
    .post(pUrl, pData).map((res: Response) => res.json());
  }
}

现在，您可以在HttpRestService中注入AppConfigService并订阅get方法。这是一个例子：

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Rx';

import { HttpRestService } from './http-rest.service';
import { MockService } from './mock.service';

@Injectable()
export class AppConfigService {

  constructor(private httpRestService: HttpRestService,
              private mockService: MockService) {}

  testAPIMethod(pUrl: string) {
    return this.httpRestService.get(pUrl).subscribe(result => {
      console.log('Service success');
      console.log(result);
    }, error => {
      console.log('Service failed');
      console.log(error);
      console.log('Run MockService');
      this.mockService.userMethods(pUrl);
    }, () => {
      console.log('Subscription done');
    });
  }
}

忽略console.log - 输出，它仅用于测试。因此，在此订阅中，您可以处理此订阅的状态。如果API-Call返回一些结果，那么你可以用它做一些事情。如果您的API-Call返回错误，那么您可以运行替代调用或本地服务。如果您的API调用成功，则可以使用完成状态() => { // done }。

Answer 2

嘿，那里注意你在HttpRestService上做了什么，当get方法调用ur返回订阅时，因为当你返回.subscribe时从方法返回的订阅，而是使用：

import { Injectable } from '@angular/core';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';
import { MockService } from './mock-service';

@Injectable()
export class HttpRestService {

constructor(private http:Http,mockService:MockService) {}

get(pUrl) {
   return this.http.get(pUrl).map(res => res.json());
}

post(pUrl, pData) {
    return this.http.post(pUrl, pData).map(res => res.json());
}
}

并在此处进行订阅：

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { HttpRestService } from './http-service';
@Injectable()
export class AppConfigService {
constructor(private httpRestService: HttpRestService) {
}
testAPIMethod(pUrl) {
    return this.httpRestService.subscribe(
     (data) => console.log(data),
     (error) => console.log(error)
 );
}

“订阅”类型中不存在“地图”属性

2 个答案: