javascript - 将 http get 调用从 angular 2 转换为最新版本

Question

我正在尝试使用最新的可用 Angular 版本制作我的新项目。

我之前有一个项目，代码如下:

 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

Angular 7 中的 HttpClient 不会( native )返回 promise 或可以使用 map() 的东西。返回值是一个 Observable，必须通过 rxjs 运算符订阅或pipe。

您的代码应该类似于:

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

其中 handleError 将是一个类方法。

在您的组件中，您将订阅返回的可观察对象以获取数据:

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

作为旁注，如果您愿意，可以将来自 HttpClient 的可观察值转换为 promise 。