Rxjs 5-简单的Ajax请求

小编典典

Rxjs 5-简单的Ajax请求

ajax

我正在尝试从一个简单的ajax请求中获取值，但是我不知道该怎么做。这是代码：

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

我到处搜索，没有简单的解释。

谢谢！

阅读 341

2020-07-26

共1个答案

小编典典

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;
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/rxjs@6.2.2/bundles/rxjs.umd.min.js"></script>

<div id="root">loading ...</div>

2020-07-26