codecamp

fromFetch

使用 Fetch API 来 发出 HTTP 请求。

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

参量

输入 您想获取的资源。 可以是网址或请求对象。
initWithSelector 可选的。 默认值为 {}。         类型: RequestInit & { selector?: (response: Response) => any; }

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')
});
AjaxTimeoutTrror
webSocket
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

RxJS operators

RxJS fetch

RxJS testing

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }