Observables: создание фиктивного http-запроса - PullRequest
Новая
       54

Observables: создание фиктивного http-запроса

0 голосов
/ 01 декабря 2018

Я пытаюсь протестировать мой код переднего плана без внутреннего API, используя наблюдаемые.В шаблоне моего компонента у меня есть текстовая область.В конечном итоге мне нужно отправить содержимое textarea в серверный интерфейс API с помощью http.post и получить обратно подтверждение содержимого.

В конструкторе моего component.ts я определяю наблюдаемый объект, который выполняет некоторые базовые проверки.и создает ложные результаты после тайм-аута 2000 мс (например, http.post/http.get):

private obsVal: Observable < any >;
private obsChange: Observable < any >;

constructor() {

   this.obsVal = Observable.create(observer => {

       setTimeout(() => {
          let errorInfo = {};
          let val = Math.floor(Math.random() * 10) + 1;

          if (val < 6) {
              errorInfo['error'] = true;
              errorInfo['info'] = "Error! Unknown expression encountered.";
          } else {
              errorInfo['error'] = false;
          }
          observer.next(errorInfo);

      }, 1000)
  });

При любом изменении внутри текстовой области вызывается следующая функция (создание другой наблюдаемой и подписка на нее):

textarea.on('change', () => {
     this.obsChange = Observable.create(observer => {
             observer.next("some text inside textarea");
             })

     this.obsChange.pipe(
         debounceTime(400),
         distinctUntilChanged(),
         switchMap((text) => {
             return this.obsVal
         })
     )
     .subscribe(errorResp => {
         this.addPanel(errorResp)
     });
  })

addPanel добавляет элемент DOM в документ для отображения ответа.

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

Конечно, я делаю здесь большую концептуальную ошибку.Может кто-нибудь указать на это?

Примечание: Элемент textarea создается динамически внутри компонента, поэтому я не могу получить доступ к событию (change)="doSomething()" для этого.

Обновление: Я пытался обновить свой код следующим образом post .

Вместо того, чтобы передавать подписку на каждое изменение, я создал тему и вызвал ее подписку в ngOnInit (): 

ngOnInit() {
this.subscription = this.obsChange.pipe( //obsChange is  the subject
             debounceTime(400),
             distinctUntilChanged(),
             switchMap((text) => {
                 return this.obsVal
             })
         )
         .subscribe(errorResp => {
             this.addPanel(errorResp)
         });
}

И при изменении события, вместо создания новой наблюдаемой obsChange, я вызываю next () к существующей: 

textarea.on('change', () => {
         this.obsChange.next("some text");
      })

Это работает впервые, но в дальнейшемИзменения next () вызывается, но он не вызывает obsChange в ngOnInit ().

...