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()
});

アップデート

master ブランチの変更を指摘してくれた @user3743222 のおかげで、作者が新しいバージョンをリリースしたようで、現在は中断部分がここにあります。

4

2 に答える 2

1

現在のバージョンでは、すべてのresponse$ストリームがすぐにリッスンされるため、リクエストが来る前にストリームが終了することはなく、アボートは効果的に機能しません。その上で問題があります。

于 2016-07-18T13:46:41.947 に答える
1

私は新しいコードにまったく慣れていませんが、古いコードでは、http ドライバーが要求ごとにオブザーバブルを返すようです。リクエストが満たされる前にそのオブザーバブルが終了/サブスクライブ解除された場合、そのリクエストは中止されます。したがって、基本的には、API を呼び出して、リクエストの結果をカプセル化したオブザーバブルを取得し、中止したいときにそのオブザーバブルを終了します。

オブザーバブルを自由に終了する方法は? takeUntil(someOtherStream)別のストリーム シグナリング アボートがある場合は、おそらく使用でき ます。

于 2016-06-28T20:43:33.140 に答える