sampullman/fetch-api

Small fetch wrapper for quickly prototyping API clients

@sampullman/fetch-api

Small fetch wrapper for creating quick API wrappers

Instructions

Install

npm i -D @sampullman/fetch-api

yarn add @sampullman/fetch-api

pnpm i -D @sampullman/fetch-api

Configuration

FetchApi global configuration is passed to the constructor.

FetchApi({
  // API base URL prepended to requests
  baseUrl: '',

  // Default request timeout
  timeout: 10000,

   // Passed to JSON.stringify and used as fetch `body`.
   // Sets headers: { Accept: 'application/json', 'Content-Type': 'application/json' }
  data: null,

  // Request URL parameters, e.g. `{ 'a': 1 }`. Passed to `new URLSearchParams(params)`
  // Entries with undefined values are filtered out
  params: RequestParams,

  // Convenience for Basic Auth.
  // Sets headers['Authorization'] = `Basic ${btoa(`${auth.username}:${auth.password}`)}`
  auth: { username: 'test', password: 'password' }

  // Request interceptors
  requestInterceptors: [],

  // Response interceptors
  responseInterceptors: [],
});

Usage

Here is an example of basic usage that includes a response interceptor for handling 403 response codes and converting the body to json.

const api = new FetchApi({
  baseUrl: 'https://cool.api/',
  responseInterceptors: [
    async (res) => {
      const { status } = res;

      if (status === 403) {
        throw new Error('FORBIDDEN');
      }
      res.data = await res.json();
      return res;
    },
  ],
});

// Make a get request to 'https://cool.api/status/'
const status = api.request({ url: 'status/' });

Environment

fetch must be available. If you need to support older browsers or Node, use a polyfill such as whatwg-fetch

Example

See the example directory.

License

MIT License © 2021 Samuel Pullman

fetch-api's Issues

Improve publish workflow

The workflow for publishing is janky and undocumented.

Currently the rough steps are:

• Make sure latest packages are installed
• Build library and Vue plugin
• Run library and plugin tests
• Manually bump plugin version
• Run pnpm run release for basic checks and library version bump
• Run pnpm publish on library and plugin

Tasks

• Add one of the release tools listed here
• Investigate Github release automation
• Add changelog generation

tslib not found

Vite fails to run when using vue3-fetch-api in a project that doesn't already include tslib

[vite] Internal server error: Failed to resolve import "tslib" from "node_modules/@sampullman/fetch-api/dist/fetch-api.mjs". Does the file exist?

Allow overriding response interceptors per-request

Currently, response intercepters are always applied to all requests. Allow overriding the interceptors on a per-request basis.