@rxjs-ninja/rxjs-utility
Version:
Useful utilities for RxJS
48 lines (47 loc) • 1.86 kB
TypeScript
/**
* @packageDocumentation
* @module Utility
*/
import { Observable } from 'rxjs';
/**
* Returns an Observable from {@link https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API|fetch} that emits
* a number during the progress of the file download and once finished emits a
* {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array|Uint8Array}
*
* @category HTTP
*
* @see {@link https://stackblitz.com/edit/fetch-with-progress|Demo Image Loader}
*
* @param input A `string` url or {@link https://developer.mozilla.org/en-US/docs/Web/API/Request/Request|Request}
* object
* @param init Optional `RequestInit` dictionary
* @param controller Optional {@link https://developer.mozilla.org/en-US/docs/Web/API/AbortController|AbortController}
* used to cancel any outstanding requests
*
* @example Set up fetching a large image, show a progress and image on final load
* ```ts
* const image = document.querySelector(".image") as HTMLImageElement;
* const progress = document.querySelector(".progress") as HTMLSpanElement;
*
* progress.innerHTML = "0%";
*
* fromFetchWithProgress("https://example.com/large-image.jpg").pipe(
* tap(val => {
* if (typeof val === "number") {
* progress.innerHTML = `${Math.round(val * 100)}%`;
* }
* }),
* filter(val => val instanceof Uint8Array),
* tap((val: Uint8Array) => {
* const img = URL.createObjectURL(
* new Blob([val.buffer], { type: "image/png" })
* );
* image.src = img;
* }),
* catchError(error => {
* progress.innerHTML = error;
* return throwError(undefined);
* })).subscribe();
* ```
*/
export declare function fromFetchWithProgress(input: RequestInfo, init?: RequestInit, controller?: AbortController): Observable<number | Uint8Array>;