Правильный способ обработки массивов, возвращаемых из запроса HTTPClient - использовать наблюдаемые операторы или операторы массива? - PullRequest
Новая
       13

Правильный способ обработки массивов, возвращаемых из запроса HTTPClient - использовать наблюдаемые операторы или операторы массива?

0 голосов
/ 10 июля 2020

Я постепенно изучаю наблюдаемые и силу, которой они обладают. Однако по мере того, как я узнаю о них больше, я задаюсь вопросом, являются ли мои методы массива старой школы теперь избыточными.

HTTPClient возвращает наблюдаемый объект, на который я подписываюсь. Однако данные, возвращаемые сервером, содержат список элементов (в данном случае единиц оборудования). Мой инстинкт был бы для нас старой школой for l oop, чтобы развернуть данные и обработать их в приложении. Однако у меня есть ощущение, что это может быть неправильным подходом в мире наблюдаемых.

Должен ли я по-прежнему использовать for циклы или переключаться на операторы Rx JS?

Вот служба: 

# 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 событий, которые я мог бы затем обработать одно за другим? Это правильный способ думать о вещах?

1 Ответ

2 голосов
/ 10 июля 2020

Больше не использовать для l oop. Вы можете сделать это: 

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

EDIT: исправление для сопоставления массива.

EDIT2: это рабочий пример (без вашего api, но другой для имитации): https://stackblitz.com/edit/angular-http-client-observers-example?file=src%2Fapp%2Fequipment.service.ts

...