web-dev-qa-db-fra.com

Rxjs 5 - Requête Ajax simple

J'essaie d'obtenir la valeur d'une simple requête ajax, mais je ne comprends pas comment faire cela. Voici le code: 

Rx.Observable
  .ajax({ url: 'https://jsonplaceholder.typicode.com/posts', method: 'GET', responseType: 'json' })
  .subscribe(function(data) { return data.response; });

J'ai cherché partout et il n'y a pas d'explication simple. 

Merci!

ajaxrxjsrxjs5
11
Mark

Observable.ajax peut accepter string ou Object avec l'interface suivante:

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

voir AjaxObservable.ts sur GitHub

Et voici des exemples:

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/[email protected]/bundles/rxjs.umd.min.js"></script>
<div id="root">loading ...</div>

21
Oles Savluk

Version TypeScript 

"dependencies": { 
     "rxjs": "^5.1.0"
 }

et 

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));
  });
4
Aneer Anwar

Vous voulez utiliser switchMap ..

const response$ = request$.switchMap((url) => {
  console.log(url);
  return fetch(url).then(res => res.json());
});

switchMap aplatit un flux de flux et le convertit en un flux qui n'émet que les réponses aux flux internes. Si un second innerStream est émis, le premier flux est tué et le second procède de son côté.

Voir cette corbeille où les démos écoutaient les requêtes via HTTP. Https://jsbin.com/duvetu/32/edit?html,js,console,output

1
danday74