Fetchasync NPM

Fetchasync

Overview

Fetchasync is a lightweight package created with typescript that provides an easy way to fetch modern API using await/async.

Features

Uses await/async
Has default configuration for common JSON API
Errors 400 >= will go to the catch by default.
Errors 200 will stay within the try.
Created with Typescript
Fixes common curls errors by default.

Usage

Installation

npm i fetchasync

Update

npm update fetchasync

Import

import { FETCHASYNC } from 'fetchasync';

Examples

GET request

Simple get request without optional params

const getRequest = async () => 
{
    try
    {
        let response = await FETCHASYNC.get<T>("myURL");

        console.log(response);
    }
    catch(error)
    {
        console.log(error);
    }
}

Url with params, custom headers, and custom options

const getRequest = async () => 
{
    try
    {
        let params = {
            "example": "test"
        };

        let headers = {
            "Content-Type" : "application/json",
            "Accept" : "application/json"
        };
        
        let options = {
            mode: "cors",
            cache: "default",
            credentials: "include",
            redirect: "follow",
            policy: "no-referrer-when-downgrade"
        }

        let response = await FETCHASYNC.get<T>("myURL", params, true, headers, options);

        console.log(response);
    }
    catch(error)
    {
        console.log(error);
    }
}

To fetch an URL with params ex: http://myURL.com?example=test use the following example

let response = await FETCHASYNC.get<T>("http://myURL.com", {"example" "test"});

Available GET params

URL string (required)
Params object (optional)
returnJson boolean (optional)
headers object (optional)
options object (optional)

POST request

Simple POST request without optional params

const postRequest = async () => 
{
    try
    {
        let body = {
            example: "example"
        };

        let response = await FETCHASYNC.post<T>("myURL", body);

        console.log(response);
    }
    catch(error)
    {
        console.log(error);
    }
}

POST request with custom headers and custom options

const postRequest = async () => 
{
    try
    {
        let body = {
            example: "example"
        };

        let headers = {
            "Content-Type" : "application/json",
            "Accept" : "application/json"
        };
        
        let options = {
            mode: "cors",
            cache: "default",
            credentials: "include",
            redirect: "follow",
            policy: "no-referrer-when-downgrade"
        }

        let response = await FETCHASYNC.post<T>("myURL", body, true, headers, options);

        console.log(response);
    }
    catch(error)
    {
        console.log(error);
    }
}

POST File request

const postFileRequest = async () => 
{
    try
    {
        let formData = new FormData();
        formData.append('logo', input.files[0]);

        let headers = {};//Let the browser decide the headers. If you manually add the header then you will need to also handle the boundaries. 

        let response = await FETCHASYNC.post<T>("myURL", formData, true, headers);

        console.log(response);
    }
    catch(error)
    {
        console.log(error);
    }
}

Available POST params

URL string (required)
body object (required)
returnJson boolean (optional)
headers object (optional)
options object (optional)

PUT request

Simple PUT request without optional params

const putRequest = async () => 
{
    try
    {
        let body = {
            example: "example"
        };

        let response = await FETCHASYNC.put<T>("myURL", body);

        console.log(response);
    }
    catch(error)
    {
        console.log(error);
    }
}

PUT request with custom headers and custom options

const putRequest = async () => 
{
    try
    {
        let body = {
            example: "example"
        };

        let headers = {
            "Content-Type" : "application/json",
            "Accept" : "application/json"
        };
        
        let options = {
            mode: "cors",
            cache: "default",
            credentials: "include",
            redirect: "follow",
            policy: "no-referrer-when-downgrade"
        }

        let response = await FETCHASYNC.put<T>("myURL", body, true, headers, options);

        console.log(response);
    }
    catch(error)
    {
        console.log(error);
    }
}

Available PUT params

URL string (required)
body object (required)
returnJson boolean (optional)
headers object (optional)
options object (optional)

PATCH request

Simple PATCH request without optional params

const patchRequest = async () => 
{
    try
    {
        let body = {
            example: "example"
        };

        let response = await FETCHASYNC.patch<T>("myURL", body);

        console.log(response);
    }
    catch(error)
    {
        console.log(error);
    }
}

PATCH request with custom headers and custom options

const patchRequest = async () => 
{
    try
    {
        let body = {
            example: "example"
        };

        let headers = {
            "Content-Type" : "application/json",
            "Accept" : "application/json"
        };
        
        let options = {
            mode: "cors",
            cache: "default",
            credentials: "include",
            redirect: "follow",
            policy: "no-referrer-when-downgrade"
        }

        let response = await FETCHASYNC.patch<T>("myURL", body, true, headers, options);

        console.log(response);
    }
    catch(error)
    {
        console.log(error);
    }
}

Available PATCH params

URL string (required)
body object (required)
returnJson boolean (optional)
headers object (optional)
options object (optional)

DELETE request

Simple DELETE request without optional params

const deleteRequest = async () => 
{
    try
    {
        let response = await FETCHASYNC._delete<T>("myURL");

        console.log(response);
    }
    catch(error)
    {
        console.log(error);
    }
}

DELETE request with custom headers and custom options

const deleteRequest = async () => 
{
    try
    {
        let headers = {
            "Content-Type" : "application/json",
            "Accept" : "application/json"
        };
        
        let options = {
            mode: "cors",
            cache: "default",
            credentials: "include",
            redirect: "follow",
            policy: "no-referrer-when-downgrade"
        }

        let response = await FETCHASYNC._delete<T>("myURL", true, headers, options);

        console.log(response);
    }
    catch(error)
    {
        console.log(error);
    }
}

Available DELETE params

URL string (required)
returnJson boolean (optional)
headers object (optional)
options object (optional)

Default optional configuration

Headers

{
  "Content-Type" : "application/json",
  "Accept" : "application/json"
}

Options

{
    "mode": "cors",
    "cache": "default",
    "credentials": "include",
    "redirect": "follow",
    "policy": "no-referrer-when-downgrade"
}

Optional interfaces data type

await FETCHASYNC.get<MyInterface>("myURL");

Params details

URL: This parameter is to specify the URL that will be fetched
returnJson: This parameter is to specify if we are waiting for a JSON response or a promise. If false a promise will be returned. If true a JSON server response is expected.
headers: This parameter is to specify the headers required to fetch the API. See Headers above, to see the default headers.
options: This parameter is to specify the type of fetch configuration. See Options above to see the default fetch config. Types are optionals <T> is optional.