使用angular6的Http get方法

以前我的项目是在angular2上。现在它升级到angular6。我面临一些关于版本更改的问题。我将从api获取一些json数据，并通过@angular/http访问它。以下是我尝试过的角度服务

import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';

 constructor(private http: HttpClient, @Inject('api') private serverApi) { }

  public getResultList(): Promise<any> {
    let uri = `${this.serverApi}/list`;
    return this.http.get(uri)
      .toPromise()
      .then((res) => {
        let temp = res.json();
        return { 'statusCode': 200, 'message': 'success', 'result': temp['items'], 'error': {} };
      })
      .catch((error) => {
        return { 'statusCode': 200, 'message': 'failed', 'result': {}, 'error': error };
      })
  }

从'rxjs'导入{Observable}；
导入'rxjs/add/operator/map'；
导入“rxjs/add/operator/toPromise”；
构造函数（私有http:HttpClient，@Inject（'api'）私有serverApi）{}
public getResultList（）：承诺{
让uri=`${this.serverApi}/list`；
返回此.http.get（uri）
.toPromise（）
。然后（（res）=>{
设temp=res.json（）；
返回{'statusCode'：200，'message'：'success'，'result'：temp['items']，'error'：{}；
})
.catch（（错误）=>{
返回{'statusCode'：200，'message'：'failed'，'result'：{}，'error'：error}；
})
}

我想将上述代码替换为angular6。以下是我尝试过的代码

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

 constructor(private http: HttpClient, @Inject('api') private serverApi) { }


 public getResultList(): Observable<any> {
    let uri = `${this.serverApi}/list`;
    return this.http.get<any[]>(uri)
      .pipe(
      tap((res) => {
        let temp = res;
        return { 'statusCode': 200, 'message': 'success', 'result': temp['items'], 'error': {} };
      }),
      catchError((error) => {
        var data = { 'statusCode': 200, 'message': 'success', 'result': {}, 'error': error };
        this.handleError('getResultList', data)
      })
      );
  }

  private handleError<T>(operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {
      console.error(error); // log to console instead
      return of(result as T);
    };
  }

从'@angular/common/http'导入{HttpClient}；
构造函数（私有http:HttpClient，@Inject（'api'）私有serverApi）{}
public getResultList（）：可观察{
让uri=`${this.serverApi}/list`；
返回此.http.get（uri）
.烟斗(
轻触（（分辨率）=>{
设temp=res；
返回{'statusCode'：200，'message'：'success'，'result'：temp['items']，'error'：{}；
}),
catchError（（错误）=>{
变量数据={'statusCode'：200，'message'：'success'，'result'：{}，'error'：error}；
this.handleError（'getResultList'，data）
})
);
}
私有句柄错误（操作='operation'，结果？：T）{
返回（错误：任意）：可观察=>{
console.error（error）；//改为登录到控制台
返回（结果为T）；
};
}

---

在这里，我从服务器端获取响应，但无法自定义get结果并从tap本身返回它。请帮我解决同样的问题。

点击仅用于操作和观察，来自文档：

点击定义-透明地执行操作或副作用，如 作为日志记录

这意味着你实际上什么也没做，加上你没有订阅可观察的it自身。或者，如果你想用它作为承诺，你也可以，但你仍然必须这样做

return this.http.get<any[]>(uri)
      .pipe(
      tap(() => {
        console.log("just logging or something");
      }),
      // You have to use map to transform the respond to something else.
      map((res) => { 'statusCode': 200, 'message': 'success', 'result': temp['items'], 'error': {} }),

      catchError((error) => {
        var data = { 'statusCode': 200, 'message': 'success', 'result': {}, 'error': error };
        this.handleError('getResultList', data)
      })
      )

返回这个.http.get（uri）
.烟斗(
点击（（）=>{
log（“只是日志记录之类的”）；
}),
//您必须使用map将响应转换为其他响应。
映射（（res）=>{'statusCode'：200，'message'：'success'，'result'：temp['items']，'error'：{}），
catchError（（错误）=>{
变量数据={'statusCode'：200，'message'：'success'，'result'：{}，'error'：error}；
this.handleError（'getResultList'，data）
})
)

如果要将结果转换为其他内容，也可以在管道内添加贴图。
编辑--
在您的组件中：

this.service.getResultList()          
.subscribe(
(res) => {
   console.log(res); // <-- Here you can do what ever you want with the result after you subscribe.
},
(err) => {
   console.log(err);
})

this.service.getResultList（）
.订阅(
（res）=>{
console.log（res）；//{
控制台日志（err）；
})

---

您可以毫无问题地捕获订阅中的错误，然后您可以在UI中随心所欲地处理它，并捕获错误。

我解释了如何从error（）操作符返回null。 您的代码确实是。服务不应返回http状态代码和其他头权限，而应返回真实的数据对象

用于将json结果直接转换为实际类。如果发生错误，则在ui中做出反应

this.service.getResultList()
.pipe(error(x => {
    return null; // here you return sth to the subscribe
}))
.subscribe(
(res) => {
    if(res == null) return; // then you need to handle this null
    console.log(res); // <-- Here you can do what ever you want with the result after you subscribe.
},
(err) => {
   console.log(err);
})

this.service.getResultList（）
.pipe（错误（x=>{
return null；//这里您将某物返回给订阅服务器
}))
.订阅(
（res）=>{
如果（res==null）return；//则需要处理此null
console.log（res）；//{
控制台日志（err）；
})

修复导入语句，以便可以使用HTTP类而不会出现任何问题

从“@angular/common/http”导入{HttpClient，HttpEventType，HttpHeaders}

将

getdata

函数更改为此可观察版本：

getdata（）：可观察{ let url:string=

${this.BASE\u url}/fetchdata/

返回此.http.get（url）； }

---

我建议使用usyn async&wait，这样数据将在一个变量中，您可以根据需要进行自定义。tap运算符不用于转换数据，您应该能够使用map运算符对数据执行修改，并以您想要的方式返回数据。了解更多信息：是否可以向订阅服务器返回某些内容如果catchError在某个时候发生，则将关闭。此时控件将转到catchError。我需要将某些内容传递给subscribe以处理UI部分。现在，在输入catchError方法后，它的控件不会返回调用函数。@LibinCJacob，我已编辑了答案，您可以从subscribe作为好的。没问题。我只是尝试了您共享的方式。但是（err）部分没有触发。因为您要从处理程序返回正常的可观察值，所以您必须使用类似throwError（rxjs）或其他东西来返回实际错误。

console.log（“data”，data）

不会被调用。