Question

以前，我的项目是在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 };
      })
  }

我想将上面的代码替换为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);
    };
  }

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

Answer 1

点击仅适用于可观察对象以及文档中的操作：

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

这意味着您实际上什么也没做，加上您自己没有订阅Observable 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)
      })
      )

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

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);
})

您可以毫无问题地从订阅中捕获错误，然后可以根据需要在UI中进行处理，也可以捕获错误。

Answer 2

我解释了如何从error（）运算符返回null。您的代码是真的。服务不应返回http状态代码和其他标头属性，而应返回真实的数据对象。

使用https://www.npmjs.com/package/class-transformer直接将json结果转换为真实类。如果发生错误，请在用户界面中做出反应。

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);
})

Answer 3

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

从'@ angular / common / http'导入{HttpClient，HttpEventType，HttpHeaders};
将getdata函数更改为此可观察的版本：

getdata（）：可观察{ 让url：string = ${this.BASE_URL}/fetchdata/ 返回this.http.get（url）; }

HTTP使用Angular6的get方法

3 个答案: