RxJS запрос обнаружения AJAX выполняется от progressSubscriber (будь то успех или ошибка) - PullRequest
Новая
       23

RxJS запрос обнаружения AJAX выполняется от progressSubscriber (будь то успех или ошибка)

0 голосов
/ 18 октября 2018

Я действительно новичок в RxJS, и у меня есть вопрос относительно запроса RxJS ajax.Мне нужно реализовать progressSubscriber для AjaxRequest RxJS (потому что мне нужен индикатор выполнения, отображаемый от 0% до 100%).Однако из кода, который я сделал, я не совсем уверен, как определить, когда запрос выполнен , тогда мы можем предпринять некоторые действия, когда это произойдет.

После некоторой проверки моегобраузер console.log(), я думаю, мы можем определить состояние done из ответа progressSubscriber, независимо от того, имеет оно свойство status или нет.Поскольку из того, что я вижу, пока выполняется запрос XHR, у него нет свойства status.

Есть ли лучший способ обнаружить запрос, который считается выполненным ( успех или ошибка ).

В настоящее время мой прогресс в получении статуса done (в ES6): 

import { Subject } from 'rxjs';
import { ajax as rxAjax } from 'rxjs/ajax';
import { merge } from 'rxjs/operators';

let form_data = new FormData();
form_data.append( 'key', 'value' );

const progressSubscriber = new Subject();
let request$ = rxAjax({
  url: 'http://localhost.com/some-api',
  method: 'POST',
  crossDomain: true,
  withCredentials: true,
  body: form_data,
  progressSubscriber
});

progressSubscriber
  .pipe( merge(request$) )
  .subscribe( data =>{

    if ( data.hasOwnProperty('status') ) {
      console.log('XHR is DONE');
    }

  });

Надеюсь, есть более элегантные способы сделать это.Может быть, что-то, что имеет 2 блока обратных вызовов, таких как обещание then() или success & error обратный вызов, как jQuery Ajax.

Заранее спасибо.

========== ОБНОВЛЕНИЕ / ПРОГРЕСС ============ *

На основании ответа Fan Cheung , I 'Мы вдохновились и ищем ошибку RxJS и полную подпись .Похоже, я узнал в прошлом, только что забыл основную функцию subscribe(), которая имеет подпись:

  • функция для вызова, когда next() произошла
  • функция для вызова, когдапроизошла ошибка
  • функция для вызова, когда выполнено / завершено

Итак, текущий прогресс я получаю в результате subscribe() (на основе приведенного выше кода): 

progressSubscriber
  .pipe( merge(request$) )
  .subscribe(
    data =>{
      if ( data.type === 'progress' ) {//Detect if it is response of Progress ( not XHR complete response )
        let upload_progress = Math.floor(data.loaded / data.total * 100 );
      }

      if ( data.hasOwnProperty('status') ) {
         //This is still the only way i can detect the request get complete
      }

    },

    err => {
      console.log( err.target.status ); //Just found that in RxJS, XHR server response is tied into `target` field
    },

    complete => {
      console.log( complete );//Complete will just give "undefined", seem we must really detect from first callback of subscribe() by detect if it has `status field from it response
    })

У кого есть идеи получше, пожалуйста, совет.Спасибо.

1 Ответ

0 голосов
/ 19 октября 2018

Используйте свойство isLoading для отслеживания, коснитесь оператора для switch isLoading state 

merge(progressSubscriber.pipe(tap(()=>
this.upload_progress = Math.floor(data.loaded / data.total * 100 )
),
request$.pipe(tap(res)=>{},catchError((e)=>{..})
).subscribe()
...