# ts-fetch

> A wrapper around fetch that allows type safety in request/response.

Latest version **1.1.4** (published 2022-09-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install ts-fetch
pnpm add ts-fetch
yarn add ts-fetch
bun add ts-fetch
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.4 |
| Published | 2022-09-06 |
| First published | 2019-01-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 15.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Erik Beuschau |
| Maintainers | erik_beus |

## Links

- npm: https://www.npmjs.com/package/ts-fetch
- Homepage: https://github.com/erik-beus/ts-fetch
- npm.io page: https://npm.io/package/ts-fetch

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) 2.2.0

## Recent versions

- 1.1.4 (latest) — 2022-09-06
- 1.1.3 — 2021-04-13
- 1.1.2 — 2019-05-06
- 1.1.1 — 2019-05-06
- 1.1.0 — 2019-01-31
- 1.0.3 — 2019-01-29
- 1.0.2 — 2019-01-18
- 1.0.1 — 2019-01-17
- 1.0.0 — 2019-01-17

## README

# ts-fetch

[![npm version](https://badge.fury.io/js/ts-fetch.svg)](https://www.npmjs.com/package/ts-fetch)
[![GitHub version](https://badge.fury.io/gh/erik-beus%2Fts-fetch.svg)](https://github.com/erik-beus/ts-fetch/releases)
[![CircleCI](https://circleci.com/gh/erik-beus/ts-fetch/tree/master.svg?style=svg)](https://circleci.com/gh/erik-beus/ts-fetch/tree/master)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/erik-beus/ts-fetch/pulls)

Small wrapper around `fetch` making it possible to have type safety around network requests.
By passing generics it's possible to indicate which types are expected on success/error and work directly with those types.
`ts-fetch` is slightly opinionated, but it's possible to override all settings. These are the default settings:
```ts
const defaultRequestParams = {
  method: 'GET',
  jsonRequest: true,
  jsonResponse: true,
  validStatusCodeStart: 200,
  validStatusCodeEnd: 299,
  timeout: 12000, // 12 seconds default timeout
}
```
If the response is not a valid JSON response and the `jsonResponse` was set to `true`, the request would return an error.

## Example usages
### Basic request with no arguments
```ts
const response = await request<{name: string}, {errorCode: number}>({
  url: 'https://myapi.com'
})
if (response.status === 'OK') {
  // Work with response.data in a typesafe way 👍
}
```
### Request with custom arguments and a non-JSON response
```ts
const response = await request<never, { errorCode: number }>({
  url: 'https://myapi.com',
  body: { name: 'Updated name of user' },
  method: 'PUT',
  jsonResponse: false, // Response will not be in JSON
  timeout: 1000, // Only 1 second timeout
  validStatusCodes: [201], // Only 201 indicates success
  extraHeaders: [{ key: 'Secret', value: '2lknf3oihvls' }],
})
if (response.status === 'OK') {
  // Things went well 👍
} else if (response.status === 'NETWORK_ERROR') {
  // Handle network error
} else {
  // Work with the returned error data that you expect in your response
}
```

### Request blob data, read return headers
```ts
const response = await request<Blob, never>({
  url: 'https://myapi.com',
  method: 'POST',
  jsonResponse: false, // Response will not be in JSON
  extraHeaders: [{ key: 'Accept', value: 'application/octet-stream' }],
})
if (response.status === 'OK') {
  // Things went well 👍

  // Useful for example for injecting img src with data from the response
  console.log(URL.createObjectURL(response.data));
  console.log(response.headers['content-type']);
} else if (response.status === 'NETWORK_ERROR') {
  // Handle network error
} else {
  // Work with the returned error data that you expect in your response
}
```

---
_Source: https://npm.io/package/ts-fetch · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._