Rx.js和应用程序工作流

Rx.js and application workflow

本文关键字：工作流 应用程序 js Rx      更新时间：2023-09-26

我有一个web应用程序，我使用Rx.js处理事件流。该应用程序使用后端提供的rest api。

大多数情况下，我订阅api调用，当请求完成时，我渲染结果并重置其他控件状态(隐藏进度元素等)。

一些api调用可以失败，当一个认证令牌过期，我必须让用户再次登录(显示登录弹出框左右)。

我很好奇是否有一种方法可以在成功登录后"恢复"api调用流?用户不需要提供额外的操作来获得服务器响应。

当前工作流的原始示例:

var apiCallStream = $.ajaxAsObservable(params):
apiCallStream.subscribe(
  result => renderResult(result),
  err => handleError(err));
function handleError(err) {
  if (err.xhr.error === 401) {
    LoginPopup();
  } else {
    ErrorPopup(err);
  }
}

这里有一些(非常粗糙的伪代码)，但您可以使用retryWhen:

// use Rx.DOM.get for an Observable Ajax GET
var source = Rx.DOM.get('/some/end/point')
  .retryWhen(function(errors) {
    // retryWhen: errors is a stream of errors
    // whatever observable you return, when it emits, the
    // observable you're operating on will be retried. (the entire thing)
    return errors.filter(function(e) { return e.status === 401; })
       // if status is 401, then tell the user to login 
      .flatMapLatest(function() { return doUserLogin; });
  });
// a contrived observable that shows a form and
// return a stream of successful logins
var doUserLogin = Observable.create(function(observer) {
  // show a form
  var form = $('.my-form').show();
  // when submit is fired on said form...
  return Rx.Observable.fromEvent(form, 'submit')
     // send a login over ajax
    .flatMap(e => Rx.DOM.post('some/url/login', form.serialize()))
});

希望这能让你有个开始

相关文章：