Rxjs 5 - Simple Ajax Request - ajax

Question

I'm trying to get the value from a simple ajax request, but I don't understand how to do that. Here is the code:
Rx.Observable
.ajax({ url: 'https://jsonplaceholder.typicode.com/posts', method: 'GET', responseType: 'json' })
.subscribe(function(data) { return data.response; });
I searched everywhere and there is no simple explanation.
Thanks!

Answer 1

Observable.ajax can accept string or Object with the following interface:
interface AjaxRequest {
url?: string; // URL of the request
body?: any; // The body of the request
user?: string;
async?: boolean; // Whether the request is async
method?: string; // Method of the request, such as GET, POST, PUT, PATCH, DELETE
headers?: Object; // Optional headers
timeout?: number;
password?: string;
hasContent?: boolean;
crossDomain?: boolean; //true if a cross domain request, else false
withCredentials?: boolean;
createXHR?: () => XMLHttpRequest; //a function to override if you need to use an alternate XMLHttpRequest implementation
progressSubscriber?: Subscriber<any>;
responseType?: string;
}
see AjaxObservable.ts on GitHub
And here is examples:
const { Observable, combineLatest } = rxjs; // = require("rxjs")
const { ajax } = rxjs.ajax; // = require("rxjs/ajax")
const { map } = rxjs.operators; // = require("rxjs/operators")
// simple GET request example
const simple$ = ajax('https://httpbin.org/get');
// POST request example
const complex$ = ajax({
url: 'https://httpbin.org/post',
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-rxjs-is': 'Awesome!'
},
body: {
hello: 'World!',
}
});
const htmlSubscription = combineLatest(simple$, complex$)
.subscribe(([simple, complex]) => {
const simpleResponse = JSON.stringify(simple.response, null, 2);
const complexResponse = JSON.stringify(complex.response, null, 2);
document.getElementById('root').innerHTML = `
<div>
<span><b>GET</b> https://httpbin.org/get</span>
<pre>${simpleResponse}</pre>
<span><b>POST</b> https://httpbin.org/post</span>
<pre>${complexResponse}</pre>
</div>`;
});
<script src="https://unpkg.com/rxjs#6.2.2/bundles/rxjs.umd.min.js"></script>
<div id="root">loading ...</div>

Answer 2

Typescript version
"dependencies": {
"rxjs": "^5.1.0"
}
and
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/dom/ajax';
import 'rxjs/add/observable/combineLatest';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/catch';
const posts$ = Observable
.ajax('https://jsonplaceholder.typicode.com/posts')
.map(e => e.response);
const htmlSubscription = posts$
.subscribe(res => {
console.log(JSON.stringify(res, null, 2));
});

Answer 3

You want to use switchMap ..
const response$ = request$.switchMap((url) => {
console.log(url);
return fetch(url).then(res => res.json());
});
switchMap flattens a stream of streams and converts it to a stream that just emits the inner streams responses. If a second innerStream is emitted, the first stream is killed and the second one proceeds on its own.
See this bin which demos streamed requests over HTTP .. https://jsbin.com/duvetu/32/edit?html,js,console,output