coma coma - 20 days ago 7
Javascript Question

How to abort calls made by @cycle/http driver?

I'm pretty new to the whole Cycle.js/RxJS ecosystem and was hoping for someone to guide me on the process of aborting an ongoing ajax call since it looks like doable somehow.

It would be awesome to have a little example forked from the search-github-user one using this.

I'm adding here a copy from that example for the sake of avoiding SO zealots downvoting:

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


UPDATE

Thanks to @user3743222 for pointing out the change on the master branch, it seems that the author has released a new version and now the abort part is here.

Answer

In current version, all the response$ streams get listened to immediately, so they never terminate before the request comes and aborting doesn't work effectively. There's an issue on that.