res.json ist keine Funktion auf Userservice Anruf

Question

Meine Anwendung 3 Reihen von Dienstleistungen hat.

• UserService - Aufrufe an HttpClient CRUD-Funktionen für Benutzer
• HttpClient auszuführen - ein Service verwendet das Token notwendig zu bestätigen/aktualisieren, und dann einen Anruf an die AuthHttp machen.
• AuthHttp - ein Dienst verwendet einen HTTP-Aufruf zu machen und die Token im Authorization-Header

Die Frage anschließen, die bei mir läuft in ist, dass die UserService versucht, die Antwort des Aufrufs zur Karte .map(res => res.json() verwenden, aber Ich erhalte den Fehler res.json is not a function. Hier

ist der Code für meine Dienste um. Ich will nur schreiben die "HTTP-Get" verwandte Methoden zur Kürze:

user.service.ts

import { Observable } from 'rxjs/Observable'; 
import { environment } from '../../environments/environment'; 
import { HttpClient } from './http-client'; 
import { AddDeleteUserModel } from './AddUserModel'; 

@Injectable() 
export class UserService { 

    baseApiUrl = environment.api_endpoint; 

    constructor(private httpClient: HttpClient) { } 

    getAllUsers() 
    { 
    return this.httpClient.get(this.baseApiUrl + 'users').map(res => res.json()); 
    } 
} 

http.client.ts:

import { Injectable } from '@angular/core'; 
import { Router } from '@angular/router'; 
import 'rxjs/Rx'; 
import { Observable } from 'rxjs/Observable'; 
import { environment } from '../../environments/environment'; 
import { AuthHttp } from './authhttp.service'; 
import { AuthUserService } from './authuser.service'; 
import { OAuthService } from 'angular-oauth2-oidc'; 

@Injectable() 
export class HttpClient { 

    constructor(
    private authHttp: AuthHttp, 
    private authUserService: AuthUserService, 
    private oAuthService : OAuthService, 
    private router: Router 
) { } 

    get(endpoint: string) { 
    if (!this.oAuthService.hasValidAccessToken) 
    { 
     this.authUserService.tokenIsBeingRefreshed.next(true); 
     this.oAuthService.refreshToken().then(() => 
     { 
     this.successfulTokenRefresh(); 
     }).catch(() => 
     { 
     this.failedTokenRefresh(); 
     return Observable.throw("Unable to refresh token."); 
     }); 
    } 

    if (this.oAuthService.hasValidAccessToken) 
    { 
     return this.getInternal(endpoint); 
    } 
    } 

    successfulTokenRefresh() { 
    this.authUserService.tokenIsBeingRefreshed.next(false); 
    this.authUserService.requireLoginSubject.next(false); 
    } 

    failedTokenRefresh() { 
    this.authUserService.tokenIsBeingRefreshed.next(false); 
    this.authUserService.requireLoginSubject.next(false); 
    this.router.navigate(['/sessiontimeout']); 
    } 

    private getInternal(endpoint: string) { 
    console.log("Getting " + endpoint); 
    return this.authHttp.get(endpoint); 
    } 
} 

authhttp. ts:

import {Injectable, EventEmitter} from '@angular/core'; 
import {Http, Headers, RequestOptions, RequestOptionsArgs, Response, RequestMethod, Request, Connection, ConnectionBackend} from '@angular/http'; 
import * as Rx from 'rxjs'; 

export enum Action { QueryStart, QueryStop }; 

@Injectable() 
export class AuthHttp { 
    process: EventEmitter<any> = new EventEmitter<any>(); 
    authFailed: EventEmitter<any> = new EventEmitter<any>(); 

    constructor(private _http: Http) { } 

    private _buildAuthHeader(): string { 
    return "Bearer " + sessionStorage.getItem("access_token"); 
    } 

    public get(url: string, options?: RequestOptionsArgs): Rx.Observable<Response> { 
    return this._request(RequestMethod.Get, url, null, options); 
    } 

    public post(url: string, body: string, options?: RequestOptionsArgs): Rx.Observable<Response> { 
    return this._request(RequestMethod.Post, url, body, options); 
    } 

    public put(url: string, body: string, options?: RequestOptionsArgs): Rx.Observable<Response> { 
    return this._request(RequestMethod.Put, url, body, options); 
    } 

    public delete(url: string, options?: RequestOptionsArgs): Rx.Observable<Response> { 
    return this._request(RequestMethod.Delete, url, null, options); 
    } 

    public patch(url: string, body: string, options?: RequestOptionsArgs): Rx.Observable<Response> { 
    return this._request(RequestMethod.Patch, url, body, options); 
    } 

    public head(url: string, options?: RequestOptionsArgs): Rx.Observable<Response> { 
    return this._request(RequestMethod.Head, url, null, options); 
    } 

    private _request(method: RequestMethod, url: string, body?: string, options?: RequestOptionsArgs): Rx.Observable<Response> { 
    let requestOptions = new RequestOptions(Object.assign({ 
     method: method, 
     url: url, 
     body: body 
    }, options)); 

    if (!requestOptions.headers) { 
     requestOptions.headers = new Headers(); 
    } 

    requestOptions.headers.set("Authorization", this._buildAuthHeader()) 

    return Rx.Observable.create((observer) => { 
     this.process.next(Action.QueryStart); 
     this._http.request(new Request(requestOptions)) 
     .map(res=> res.json()) 
     .finally(() => { 
     this.process.next(Action.QueryStop); 
     }) 
     .subscribe(
     (res) => { 
      observer.next(res); 
      observer.complete(); 
     }, 
     (err) => { 
      switch (err.status) { 
      case 401: 
       //intercept 401 
       this.authFailed.next(err); 
       observer.error(err); 
       break; 
      default: 
       observer.error(err); 
       break; 
      } 
     }) 
    }) 
    } 
} 

Answer 1

Ich hatte ein ähnliches Problem in der Vergangenheit. Obwohl ich nicht den gesamten Code gelesen hat, vermute ich, es liegt daran, dass Sie nicht explizit Response von @angular/http importieren kann. Ich denke, es aus irgendeinem Grund die falsche Art Vermutungen, die nicht .json() hat.

hinzufügen an der Spitze Ihres user.service.ts:

import { Response } from '@angular/http`; 

Auch fügen Sie http.client.ts.

Machen Sie Ihre HTTP-Client-Signatur spezifisch:

get(endpoint: string): Response {