Конвертировать http получить вызов от Angular 2 до новейшей версии

Question

Я пытаюсь сделать свой новый проект в новой доступной угловой версии.

У меня был предыдущий проект со следующим кодом:

 return this.http.get("XXXX", {withCredentials: true}).map(e => {
      console.log(e.json());
        return false;
    }).catch(() => {
      console.log("???");
      return Observable.of(false);
    });

вышеописанное работало нормально в моем проекте angular2, но когда я пытаюсь преобразовать его в angular7 (?), Я получаю следующую ошибку:

ERROR in src/app/global.service.ts(54,29): error TS2552: Cannot find name 'map'. Did you mean 'Map'?

это часть текущего кода:

this.http.get(url).pipe(map((response: any) => response.json()));

Я также пытался настроить код на что-то вроде:

return this.http.get( url,this.options).pipe(map(DATA) =>  {

  console.log(data);
  return data;

  });

но, похоже, не может идти дальше.

что не так с моим кодом, и что мне нужно сделать, чтобы он работал?

импорт:

import 'rxjs/add/operator/map';
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Router } from '@angular/router';
import { environment } from "./../environments/environment";

import { Observable, Subject  } from "rxjs";

tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

Answer 1

HttpClient в Angular 7 (изначально) не возвращает обещание или что-то, что можно использовать на map().Возврат является Observable и должен быть подписан или pipe 'd через операторы rxjs.

Ваш код должен выглядеть следующим образом:

return this.http.get("XXXX")
    .pipe(
      catchError(this.handleError)
    );

В котором handleError будет классомmethod.

В вашем компоненте вы бы subscribe возвратили наблюдаемую для получения данных:

.subscribe(
      data => this.data = data /* do something with data */ , // success path
      error => this.error = error // error path
    );

В качестве примечания, наблюдаемая из HttpClient может быть превращена в обещание, еслиВы желали.

Answer 2

// Пример Получить запрос

 import { HttpHeaders } from '@angular/common/http';


 const httpOptions = {

 headers: new HttpHeaders({

  'Content-Type':  'application/json',

  'Authorization':  'token'

 })};

 get_data (): Observable<any> {

     const Url = `${serviceurl}`;

     return this.http.get<any>(Url, httpOptions)

     .pipe(map(res => res))

     .catch(err => err);
  }

// Пример 2:

  get_data (): Observable<any> {

     const Url = `${serviceurl}`;

     return this.http.get<any>(Url)

     .pipe(
          catchError(this.handleError('get_data'))
       );

  }