@fsad-labs/easy-fetch

A lightweight and flexible wrapper around the Fetch API that simplifies HTTP requests with reusable clients and pre-defined clients support.

Features

• Base URL support
• Global headers
• Interceptors
• Automatic JSON parsing
• Simplified error handling

Install

npm i @fsad-labs/easy-fetch

Usage

You can use these different clients for make you fetch call API or create your own client with easyFetch.

easyFetch

• Description: The default fetch wrapper with automatic JSON parsing, error handling and using interceptors.

const { EasyFetch } = require('@fsad-labs/easy-fetch');

const baseUrl = 'https://api.example.com';

const easyFetch = new EasyFetch({ baseUrl });

easyFetch.interceptors.request.use((config) => {
  config.meta = { startTime: Date.now() };
  return config;
});

easyFetch.interceptors?.response.use(async (res) => {
  res.modified = true;
  res.meta = {
    requestUrl: res.config?.url,
    duration: Date.now() - res.config?.meta?.startTime,
  };
  return res;
});

easyFetch.interceptors.response.useError(async (error: unknown) => {
  return new EasyFetchError({
    ...error,
    code: 'ERROR_CAUGTH',
    message: error?.message + ' Caugth',
    original: error,
  });
});

easyFetch
  .request({ url: '/todos/1', method: 'GET' })
  .then((res) => console.log('GET', res));

easyFetch
  .request({
    url: '/posts',
    method: 'POST',
    body: {
      userId: 1,
      title: 'TEST',
      body: 'TEST Library',
    },
  })
  .then((res) => console.log('POST', res));

easyFetch
  .request({
    url: '/posts/1',
    method: 'PUT',
    body: {
      userId: 1,
      id: 1,
      title: 'TEST',
      body: 'TEST Library edited',
    },
  })
  .then((res) => console.log('PUT my POST', res.statusText));

easyFetch
  .request({
    url: '/posts/1',
    method: 'DELETE',
  })
  .then((res) => {
    console.log('DELETE', res.statusText);
  });

override default interceptors

you can override the default interceptors using setIntereptors

const easy = new EasyFetch({ baseUrl: 'https://api.example.com' });
easy.setIntereptors({
  // New behavior for REQUEST - RESPONSE and ERROR interceptors
});

createClient

• Description: Create a reusable client, use the request or response interceptors and headers settings.

const client = createClient({ baseUrl: 'https://api.example.com' });

client.interceptors.request.use(async (config) => {
  config.headers = new Headers({ 'X-Test': '123' });
  return config;
});

client.interceptors?.response.use(async (res) => {
  res.modified = true;
  res.meta = {
    requestUrl: res.config?.url,
    duration: Date.now() - res.config?.meta?.startTime,
  };
  return res;
});

client
  .get('/todos/1')
  .then((result) => {
    console.log(result);
  })
  .catch((err) => {
    // TODO: Catch the error
  });

override default interceptors using createClient also

you can override the default interceptors using setIntereptors, make sure you call this function before use interceptors prop

client.setInterceptors({
  request: {
    handlers: [
      async (config) => {
        config.headers = new Headers({ 'X-Test': '123' });
        return config;
      },
    ],
    use: function (fn) {
      this.handlers.push(fn);
      return this;
    },
  },
  response: {
    successHandlers: [],
    errorHandlers: [],
    use: function (onSuccess) {
      this.successHandlers.push(onSuccess);
      return this;
    },
    useError: function (onError) {
      this.errorHandlers.push(onError);
      return this;
    },
  },
});

pre-defined clients

easyFetchAuth

Use this client to easily make authenticated requests.

conat easyAuth = easyFetchAuth(url, 'token123');

easyAuth.get().then((result) => {
    //TODO
});

easyFetchWithHeaders

• Description: Send requests with custom headers.

const easyHeaders = easyFetchWithHeaders(url, {
  'X-Custom': 'value',
});

easyHeaders.get().then((result) => {
  //TODO
});

easyFetchWithTimeout

• Description: Make requests with a timeout (milliseconds).

const easyTimeout = easyFetchWithTimeout(url, 2000);

easyTimeout.get().then((result) => {
  // TODO
});

Contributing

If my work has helped you or saved you some time, consider Buy Me a Coffee☕. It keeps me energized and motivated to keep creating and improving.

📄 License

This project is licensed under the MIT License © drixev