fromFetch

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

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

參量

returns

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

描述

警告 部分提取API仍處于試驗(yàn)階段。 AbortController是 才能正常運(yùn)行并適當(dāng)使用取消功能。

會(huì)自動(dòng)設(shè)置一個(gè)內(nèi)部 AbortController 以便 拆除內(nèi)部 fetch在訂閱取消時(shí) 。

如果 a signal通過 提供 init參數(shù) ，則其行為將與通常 fetch。 如果提供的內(nèi)容 signal中止， 的錯(cuò)誤 fetch通常會(huì)拒絕 在那種情況下，將被視為可觀察到的錯(cuò)誤。

基本用途

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

與分塊傳輸編碼一起使用

對(duì)于使用 HTTP 響應(yīng) 分塊傳輸編碼的 ， 返回的諾言 fetch將在響應(yīng)的標(biāo)頭被解析后立即解析 收到。

這意味著 fromFetch可觀察者將發(fā)出 Response-并將 然后完成-在收到尸體之前。 當(dāng)其中一種方法 Response-如 text()或 json()-被調(diào)用，返回的諾言將不會(huì) 解決，直到收到全身。 取消訂閱任何可觀察到的 使用 promise 作為可觀察輸入的操作不會(huì)中止請(qǐng)求。

為了便于中止使用分塊傳輸編碼的響應(yīng)的檢索， 一個(gè) 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')
});