操作符和 Ajax

这是 Rx 对象上的 ajax 操作符。

使用 ajax() 操作符

index.html

  1. <html>
  2.     <body>
  3.         <div id="result">
  5.         </div>
  6.         <script src="https://unpkg.com/@reactivex/rxjs@5.0.1/dist/global/Rx.js"></script>
  7.         <script src="app.js"></script>
  8.     </body>
  9. </html>

app.js

  1. let person$ = Rx.Observable
  2.   .ajax({
  3.       url : 'http://swapi.co/api/people/1',
  4.       crossDomain: true,
  5.       createXHR: function () {
  6.         return new XMLHttpRequest();
  7.      }
  8.     })
  9.   .map(e => e.response);
  11. const subscription = person$
  12.   .subscribe(res => {
  13.       let element = document.getElementById('result');
  14.       element.innerHTML = res.name
  15.       console.log(res)
  16.   });

有一点坑的是我们调用 ajax() 操作符的方式，除了 url 属性外我们显示地指定了一堆配置。这样做的原因是 ajax 操作符内部是这样运行的：

执行 ajaxObservable 中的 XHR 的默认工厂函数，并把 withCredentials 默认设置为 true

所以我们给定了一个自定义工厂函数而且它可以正常运行。我明白目前这也被看做是一个 issue

使用 fetch API

  1. const fetchSubscription = Rx.Observable
  2. .from(fetch('http://swapi.co/api/people/1'))
  3. .flatMap((res) => Rx.Observable.from(res.json()) )
  4. .subscribe((fetchRes) => {
  5.     console.log('fetch sub', fetchRes);
  6. })

这里有几件事情值得一提

  • fetch api 是基于 promise 的，然而使用 .from() RxJS 允许我们输入一个 promise 作为参数并将其转换为 Observable 。
  • 请求回来的结果是一个 response 对象，需要将它转换成 JSON 。调用 json() 方法可以完成这项工作，但 json() 返回的也是 Promise 。所以我们需要再次使用 from() 操作符。但在一个 Observable 内再创建一个 Observable 的话会形成嵌套的 Observable，这不是我们想要的，我们要的只是 JSON 。所以我们使用一个叫做 flatMap() 的操作符来修复它。想深入了解 flatMap()，请参加这里

最终我们得到了预期的 JSON，如果要使用 CORS 跨域的话，还得做一些额外的工作。