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

Angular 7中的HttpClient不会（自然地）返回承诺或可以使用map()的东西。返回值是可观察的，必须通过rxjs运算符进行订阅或pipe订阅。

您的代码应类似于：

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

其中handleError将是一个类方法。

在您的组件中，您将subscribe指向返回的observable以获取数据：

.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'))
       );

  }

将http get通话从angular 2转换为最新版本

2 个答案: