extended-fetch

KO | EN

gitlite — search

#hacktoberfest #typescript #golang #android #rust #linux #docker #nodejs #java #windows #awesome #awesome-list #pytorch #ios

(★ 17)

A window.fetch but with additional features

extended-fetch 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# extended-fetch

![NPM Version](https://img.shields.io/npm/v/%40akiyamka%2Fextended-fetch)
![NPM Type Definitions](https://img.shields.io/npm/types/%40akiyamka%2Fextended-fetch)
[![spring-easing's badge](https://deno.bundlejs.com/badge?q=@akiyamka/extended-fetch&treeshake=[*]&config={%22esbuild%22:{%22format%22:%22esm%22}})](https://bundlejs.com/?q=@akiyamka/extended-fetch) [![Module type: ESM](https://img.shields.io/badge/module%20type-esm-brightgreen)](https://github.com/voxpelli/badges-cjs-esm) [![Module type: CJS](https://img.shields.io/badge/module%20type-cjs-brightgreen)](https://github.com/voxpelli/badges-cjs-esm)

**This library allows you to cath Timeout Error without enforcing a time restriction**

🧹 No dependencies  
🤏 Tiny size  
🧩 Does not patching existing fetch  
🔀 In most cases can be used as drop in replacement for fetch

> ⚠️ It's _not_ a fetch polyfill. It uses `Request` and `Response` objects from fetch implementation

## Installation

```sh
npm install @akiyamka/extended-fetch
```

## Usage

Have fetch like api, but with few additional features:

### Catch timeout error

Fetch does not allow the user to know if his request was failed due to a 504 error.  
Instead it throws common `TypeError: Failed to fetch`  
But `extended-fetch` throw 'Timeout Error' error for that case

```js
import { extendedFetch, isTimeoutError } from '@akiyamka/extended-fetch'

extendedFetch('/users', {
  method: 'POST',
  body: JSON.stringify({ foo: 'bar' }),
}).catch((error) => {
  // Allow identify timeout error
  console.assert(error.message, 'Timeout Error')
  console.assert(isTimeoutError(error), true)
})
```

### Subscribe to upload and download events with progress:

[Stackblitz live demo](https://stackblitz.com/edit/vitejs-vite-8t5mbf?file=src%2Fdemo.ts)

```js
import { extendedFetch } from 'extended-fetch'

extendedFetch(
  '/upload',
  // Fetch configuration
  {
    method: 'POST',
    body: File,
  },
  // Additional settings
  {
    onUploadProgress: (event) => {
      console.log(
        `Uploaded: ${Math.floor(event.progress * 100)}% (${event.bytes} bytes)`
      )
    },
  }
)

extendedFetch(
  '/download',
  // Fetch configuration
  {
    method: 'GET',
  },
  // Additional settings
  {
    onDownloadProgress: (event) => {
      console.log(
        `Downloaded: ${Math.floor(event.progress * 100)}% (${event.bytes} bytes)`
      )
    },
  }
)
```

### Catch Abort error

The library has a typed helper for Abort error detection

```ts
import { extendedFetch, isAbortError } from 'extended-fetch'

const abortController = new AbortController()
abortController.abort()
try {
  const reference = await extendedFetch(srv.readyCheck(), {
    signal: abortController.signal,
  })
} catch (err) {
  if (isAbortError(e)) {
    // request was aborted
  }
}
```

## Motivation

Fetch has a pretty good api but doesn't cover some of the frequent occurrences of what an XHR query can give us

### Fetch and timeout error

Currently, there is no way to determine that the reason the request failed is due to the Timeout Error using the fetch API, but sometimes it needed, for example, for meaningful UI reaction.

[The most popular workaround](https://stackoverflow.com/questions/46946380/fetch-api-request-timeout) for this today is to set a forced limit on the client side, which will only work if it less than the existing limit outside, and it will also break functionality in situations where the limit has been raised above the standard limit

### Fetch and uploading progress

Using fetch we can get _download_ progress information [using readable stream](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API/Using_readable_streams#consuming_a_fetch_as_a_stream) (if supported), but we still don't have a way to get _upload_ progress using fetch api.

### Let's combine fetch api and XHR capabilities

I wrapped XHR in a fetch api (taking some code from the [fetch polyfill](https://github.com/JakeChampion/fetch)) and added the missing functionality available from the XHR api

extended-fetch

extended-fetch 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

extended-fetch

extended-fetch 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README