时间戳

首页 > 解决方案 > 处理从 HTTPClient 请求返回的数组的正确方法 - 使用可观察运算符或数组运算符？

angular - 处理从 HTTPClient 请求返回的数组的正确方法 - 使用可观察运算符或数组运算符？

问题描述

我正在逐渐了解可观察对象及其所拥有的力量。然而，随着我对它们的了解更多，我想知道我的老式数组方法现在是否多余。

HTTPClient 返回一个我订阅的 observable。然而，从服务器返回的数据包含一个项目列表（在这种情况下是设备）。我的直觉对我们来说是一个老派的for循环来解开数据并将其处理到应用程序中。但是我有一种感觉，在可观察的世界中，这可能不是正确的方法。

我应该仍然使用for循环还是切换到 RxJS 运算符？

这是服务：

# equipment.service.ts

export class EquipmentService {

  public equipmentList:Array = [];

  constructor(private http: HttpClient) {
  }

  public loadEquipment(){

    this.http.get('https://ourapi.com/equipment/')
      .subscribe(response => { 

        // Is this the right approach in an RXJS world?
        for(let record of response.data){
          equipmentList.push ({
            id: record.id,
            equipment_required: record.equipment_required,
            quote: record.quote,
            created_time: record.created_time,
          })
        }
        
      });
  }
}

这是服务器返回的数据：

{
    "data": [
        {
            "id": "recNl4mf81TxaQstV",
            "equipment_required": "Speakers + amp + dj equipment for music ",
            "quote": 110,
            "created_time": "2018-05-13T15:57:14.000Z"
        },
        {
            "id": "recOzzRpZ0pS4GQYs",
            "equipment_required": "Radio Mike",
            "quote": 400,
            "created_time": "2018-05-13T15:57:14.000Z"
        },
        {
            "id": "recXhWqLKsdz3QE6t",
            "equipment_required": "Fairy lights to cover area",
            "quote": 400,
            "created_time": "2018-05-13T15:59:06.000Z"
        }
    ]
}

我感兴趣的代码部分是处理服务器响应的代码部分，处理subscribe请求的方法。我正在使用for(let record of response.data)，但这感觉就像我应该能够使用可观察运算符拆分数据，然后对每条记录进行操作。

那是对的吗？是否有一种可观察的方法将这个单一的可观察事件拆分成一个单独的EquipmentRecord事件流，然后我可以一个一个地处理这些事件？这是思考问题的正确方式吗？

标签： angularrxjsobservable

解决方案

不再使用 for 循环。你可以这样做：

import {Observable} from 'rxjs';
import {map} from 'rxjs/operators';
import {HttpClient} from '@angular/common/http';

...

  getEquipmentList(): Observable<any[]> {
    console.log('getEquipmentList');
    return this._http.get<any>('https://ourapi.com/equipment/').pipe(
      map(response => response.data.map(data=> ({
            id: data.id,
            equipment_required: data.equipment_required,
            quote: data.quote,
            created_time: data.created_time,
        })))
    );

如果您添加测试 stackblitz，我们也可以在现场尝试。您从服务器返回的数据与您尝试通过服务恢复的数据之间没有对应关系（例如：record.attributes.name）。

编辑：修复数组映射。

EDIT2：这是一个工作示例（没有您的 api，但另一个用于模拟）：https://stackblitz.com/edit/angular-http-client-observers-example?file=src%2Fapp%2Fequipment.service.ts

推荐阅读