fromFetch

使用 Fetch API 來 發(fā)出 HTTP 請求。

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

參量

returns

Observable<Response | T>：一個 Observable，在訂閱時使用本機執(zhí)行 HTTP 請求 fetch 功能。 將 Subscription與綁定在一起以 AbortController進行抓取。

描述

警告 部分提取API仍處于試驗階段。 AbortController是 才能正常運行并適當使用取消功能。

會自動設置一個內部 AbortController 以便 拆除內部 fetch在訂閱取消時 。

如果 a signal通過 提供 init參數(shù) ，則其行為將與通常 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可觀察者將發(fā)出 Response-并將 然后完成-在收到尸體之前。 當其中一種方法 Response-如 text()或 json()-被調用，返回的諾言將不會 解決，直到收到全身。 取消訂閱任何可觀察到的 使用 promise 作為可觀察輸入的操作不會中止請求。

為了便于中止使用分塊傳輸編碼的響應的檢索， 一個 selector可以通過指定 init參數(shù)：

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