Fetch Wrapper Library

A simple, lightweight fetch wrapper designed to simplify making HTTP requests in both JavaScript and TypeScript projects. It comes with built-in support for configuring global headers, base URL, and authorization tokens, making it easier to interact with REST APIs.

Features

• Easy configuration of global headers, base URL, and authorization tokens.
• Supports GET, POST, PUT, DELETE and PATCH HTTP methods.
• TypeScript support out of the box with included type definitions.

Installation

Install the package with npm:

npm install simple-fetch-wrap

Usage

First, set up the global configuration for your requests in your app.tsx/jsx file or root(entry) file :

import { setConfig } from "simple-fetch-wrap";

setConfig({
  token: "auth_token_here",
  baseurl: "https://api.example.com",
  globalHeaders: { "Custom-Header": "value" },
});

Making requests:

import { fetchWrapper } from "simple-fetch-wrap";

// Example GET request
async function fetchData() {
  const { data, error } = await fetchWrapper({
    endpoint: "/data",
    method: "GET",
  });

  if (error) {
    console.error(error);
    return;
  }

  console.log(data);
}

// Example POST request
async function createData() {
  const { data, error } = await fetchWrapper({
    endpoint: "/data",
    method: "POST",
    body: { key: "value" },
  });

  if (error) {
    console.error(error);
    return;
  }

  console.log(data);
}

fetchData();
createData();

API Reference

setConfig(config)

Sets the global configuration.

• config.token: Authorization token.
• config.baseurl: Base URL for all requests.
• config.globalHeaders: Global headers to be included in every request.

| Parameter | Type | Default | Description | | -------------------------- | ------------- | ------- | ----------------------------------------- | | token (required) | string | | API token for Authorization header. | | baseurl (required) | string | | The base URL for the API endpoints. | | globalHeaders (optional) | HeadersInit | {} | Optional global headers for all requests. |

fetchWrapper(options)

Makes an HTTP request.

• options.endpoint: The endpoint path.
• options.method: HTTP method (GET, POST, PUT, DELETE).
• options.withAuth: Include authorization token in the request (default: false).
• options.body: Request payload for POST and PUT methods.
• options.customHeaders: Custom headers for the specific request.

| Property | Type | Default | Description | | -------------------------- | ----------------------------- | ------- | -------------------------------------------- | | endpoint (required) | string | | The API endpoint to call. | | method (required) | "GET"/"POST"/"PUT"/"DELETE" | | HTTP method of the request. | | withAuth (optional) | boolean | false | Whether to include the Authorization header. | | body (optional) | Generic | | Request payload for POST, PUT requests. | | customHeaders (optional) | HeadersInit | {} | Custom headers for the specific request. |

fetchWrapper(options) returns:

Promise<R | ReturnMessage<R>>

The function returns a Promise that resolves to either the data of type R or an object of ReturnMessage<R> containing error, success, and data properties, allowing for both data retrieval and error handling.

ReturnMessage<R>

| Property | Type | Description | | --------- | --------- | -------------------------------------------------- | | error | string | Optional. Error message if the request fails. | | success | string | Optional. Success message if the request succeeds. | | data | Generic | Optional. The response data from the request. |

Contributing

Contributions are welcome! If you'd like to help improve the Astro Website Template, feel free to submit issues, feature requests, or pull requests.

License

Distributed under the MIT License. See LICENCE for more information.

Acknowledgments

• Icon and designs from Quazire.com

• Backed by Quazire.com

• Follow me on Twitter and Linkedin

• Support my work with a Donation 🔥🚀