处理HTTPClient请求返回的数组的正确方法-使用可观察运算符还是数组运算符

Question

我正在逐渐了解可观察性及其威力。然而，随着我对它们的了解越来越多，我想知道我的老派数组方法现在是否是多余的。

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事件，然后我可以逐一处理这些事件？这是正确的思考方式吗？

Answer 1

不再使用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,
})))
);

如果你添加了一个测试堆栈，我们也可以当场尝试。您从服务器返回的数据和您尝试使用服务恢复的数据之间没有对应关系(例如：record.attributes.name(

编辑：修复数组映射。

编辑2：这是一个工作示例(没有你的api，但另一个用于mock(：https://stackblitz.com/edit/angular-http-client-observers-example?file=src%2Fapp%2Fequipment.service.ts