fromFetch

使用 Fetch API 来 发出 HTTP 请求。

fromFetch<T>(input: string | Request, initWithSelector: RequestInit & { selector?: (response: Response) => any; } = {}): Observable<Response | T>

参量

returns

Observable<Response | T>：一个 Observable，在订阅时使用本机执行 HTTP 请求 fetch 功能。 将 Subscription与绑定在一起以 AbortController进行抓取。

描述

警告 部分提取API仍处于试验阶段。 AbortController是 才能正常运行并适当使用取消功能。

会自动设置一个内部 AbortController 以便 拆除内部 fetch在订阅取消时 。

如果 a signal通过 提供 init参数 ，则其行为将与通常 fetch。 如果提供的内容 signal中止， 的错误 fetch通常会拒绝 在那种情况下，将被视为可观察到的错误。

基本用途

import { of } from 'rxjs';
import { fromFetch } from 'rxjs/fetch';
import { switchMap, catchError } from 'rxjs/operators';


const data$ = fromFetch('https://api.github.com/users?per_page=5').pipe(
 switchMap(response => {
   if (response.ok) {
     // OK return data
     return response.json();
   } else {
     // Server is returning a status requiring the client to try something else.
     return of({ error: true, message: `Error ${response.status}` });
   }
 }),
 catchError(err => {
   // Network or other error, handle appropriately
   console.error(err);
   return of({ error: true, message: err.message })
 })
);


data$.subscribe({
 next: result => console.log(result),
 complete: () => console.log('done')
});

与分块传输编码一起使用

对于使用 HTTP 响应 分块传输编码的 ， 返回的诺言 fetch将在响应的标头被解析后立即解析 收到。

这意味着 fromFetch可观察者将发出 Response-并将 然后完成-在收到尸体之前。 当其中一种方法 Response-如 text()或 json()-被调用，返回的诺言将不会 解决，直到收到全身。 取消订阅任何可观察到的 使用 promise 作为可观察输入的操作不会中止请求。

为了便于中止使用分块传输编码的响应的检索， 一个 selector可以通过指定 init参数：

import { of } from 'rxjs';
import { fromFetch } from 'rxjs/fetch';


const data$ = fromFetch('https://api.github.com/users?per_page=5', {
  selector: response => response.json()
});


data$.subscribe({
 next: result => console.log(result),
 complete: () => console.log('done')
});