Обработка нескольких наблюдаемых и функций - PullRequest
Новая
       17

Обработка нескольких наблюдаемых и функций

0 голосов
/ 03 ноября 2019

При выборе определенной коллекции из списка, я должен получить заголовки, используя http-вызов. Иногда наблюдаемые реагируют быстро, и данные заполняются, как и ожидалось, но много раз, когда наблюдаемые требуют времени. Если мы ожидаем ответа наблюдаемой, она работает, как и ожидалось, но когда выбор коллекции переключился быстро, поскольку первая наблюдаемая еще не ответила, а новая запускается, createHeader () получает messedup полностью.

Я прочитал многостатьи и узнал, что debounceTime помогает держать заметным. Я пытался, но не работал. 

  selectCollection(){
    console.log('Selected Collection :', this.selectedCollection)
    this.buildURL();
    console.log('URL :', this.url1)
    this.columnDefs = [];
    this.getHeader()
  }

  buildURL(){
    this.url1 = this.prefixURL + JSON.stringify(this.selectedCollection)
  }

  getHeader(){
    let recordsObs$ = this.httpService.ajaxCall('GET', this.url1, this.reqData)
    recordsObs$.subscribe(data => {
      console.log('Records :',data)
      this.records = data
      this.createHeader(this.records[0])
    })
  }

  createHeader(records){
    this.columnDefs.push(this._header)
    console.log('create Header',records)
    records.fields.forEach(field => {
      console.log(field)
      var header = new Header();
      header.headerName = field.fieldLabel
      header.field = field.fieldName
      header.width = 150
      this.columnDefs.push(header)
    })
    this.gridOptions.api.setColumnDefs(this.columnDefs)
  }

Ожидаемый результат: если я быстро переключу элементы из списка, все предыдущие наблюдаемые объекты должны быть отброшены, и только самые последние данные должны использоваться для createHeader ().

1 Ответ

0 голосов
/ 10 ноября 2019

Самый простой способ сделать это - сохранить ссылку на подписку и отменить ее, если сделан другой запрос: 

...
recordSubscription: Subscription;

getHeader(){
    if (this.recordSubscription) {
        this.recordSubscription.unsubscribe();
        this.recordSubscription = null;
    }
    let recordsObs$ = this.httpService.ajaxCall('GET', this.url1, this.reqData)
    this.recordSubscription = recordsObs$.subscribe(data => {
      console.log('Records :',data)
      this.records = data
      this.createHeader(this.records[0])
    })
  }

...

С другой стороны, если вы часто сталкиваетесь с этой ситуацией, вы можете захотетьрассмотреть возможность использования некоторой библиотеки управления состоянием, такой как упомянутая altu здесь .

...