ts-fetch

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

Usage no npm install needed!

<script type="module">
  import tsFetch from 'https://cdn.skypack.dev/ts-fetch';
</script>

README

ts-fetch

npm version GitHub version CircleCI PRs Welcome

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:

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

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

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
}

More examples will follow ...