3

我对整个 Cycle.js/RxJS 生态系统还很陌生，我希望有人能指导我中止正在进行的 ajax 调用的过程，因为它看起来似乎可行。

如果有一个从search-github-user中派生出来的小例子，那就太棒了。

为了避免 SO 狂热者投反对票，我在这里添加了该示例的副本：

import Cycle from '@cycle/core';
import {Observable} from 'rx';
import {div, label, input, hr, ul, li, a, makeDOMDriver} from '@cycle/dom';
import {makeHTTPDriver} from '@cycle/http';

function main(sources) {
  // Requests for Github repositories happen when the input field changes,
  // debounced by 500ms, ignoring empty input field.
  const searchRequest$ = sources.DOM.select('.field').events('input')
    .debounce(500)
    .map(ev => ev.target.value)
    .filter(query => query.length > 0)
    .map(q => ({
      url: 'https://api.github.com/search/repositories?q=' + encodeURI(q),
      category: 'github',
    }));

  // Requests unrelated to the Github search. This is to demonstrate
  // how filtering for the HTTP response category is necessary.
  const otherRequest$ = Observable.interval(1000).take(2)
    .map(() => 'http://www.google.com');

  // Convert the stream of HTTP responses to virtual DOM elements.
  const vtree$ = sources.HTTP
    .filter(res$ => res$.request.category === 'github')
    .flatMap(x => x)
    .map(res => res.body.items)
    .startWith([])
    .map(results =>
      div([
        label({className: 'label'}, 'Search:'),
        input({className: 'field', attributes: {type: 'text'}}),
        hr(),
        ul({className: 'search-results'}, results.map(result =>
          li({className: 'search-result'}, [
            a({href: result.html_url}, result.name)
          ])
        ))
      ])
    );

  const request$ = searchRequest$.merge(otherRequest$);

  return {
    DOM: vtree$,
    HTTP: request$
  };
}

Cycle.run(main, {
  DOM: makeDOMDriver('#main-container'),
  HTTP: makeHTTPDriver()
});

更新

感谢@user3743222 指出master分支上的变化，看来作者已经发布了一个新版本，现在abort部分在这里。

4

2 回答 2

1

在当前版本中，所有response$流都会立即被监听，因此它们在请求到来之前永远不会终止，并且中止不会有效地工作。有一个问题。

于 2016-07-18T13:46:41.947 回答
1

我对新代码一点也不熟悉，但在旧代码中，http 驱动程序似乎为每个发出的请求返回一个 observable。如果该 observable 在请求完成之前终止/取消订阅，则该请求将被中止。所以基本上，调用 API，获取封​​装请求结果的可观察对象，并在您想要中止时终止该可观察对象。

如何随意终止 observable？takeUntil(someOtherStream)如果您有另一个流信号中止，您可能会使用 。

于 2016-06-28T20:43:33.140 回答