web-dev-qa-db-ja.com

Rxjs 5-シンプルなAjaxリクエスト

単純なajaxリクエストから値を取得しようとしていますが、その方法がわかりません。コードは次のとおりです。

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

どこでも検索しましたが、簡単な説明はありません。

ありがとう！

ajaxrxjsrxjs5
13
Mark

Observable.ajaxは、次のインターフェースでstringまたはObjectを受け入れることができます。

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

GitHubのAjaxObservable.ts を参照してください

次に例を示します。

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>
24
Oles Savluk

TypeScriptバージョン

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

そして

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

SwitchMap ..を使用します。

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

switchMapは、ストリームのストリームをフラット化し、内部ストリームの応答を送信するだけのストリームに変換します。 2番目のinnerStreamが発行されると、最初のストリームが強制終了され、2番目のストリームが単独で処理されます。

HTTP経由でストリームされたリクエストをデモするこのビンを参照してください。 https://jsbin.com/duvetu/32/edit?html,js,console,output

1
danday74