Simple Fetch Api

This package is abstracted from and inspired by the packages

• axios

• @monabbous/ng-api-wrapper

  where it simplifies the requests to the API

Features

• Lightweight.
• Predefined Multiple Named Api Base Urls only once.
• Auto Content parsing based on responseType value in the request.
• Ability to intercept the request before it is sent.

Installation

Using cdn

<script src="https://unpkg.com/@monabbous/fetch-api@latest/dist/fetch-api.cdn.js"></script>

Using npm

npm i @monabbous/fetch-api

Import the class

in javascript

const {FetchApi} = require('@monabbous/fetch-api');
// Or
const FetchApi = require('@monabbous/fetch-api').FetchApi; 

in typescript or modern javascript

import {FetchApi} from "@monabbous/fetch-api";

Implementation

Setting up

First thing you must do is define the api urls with its versions

FetchApi.servers = {
    spiza: {
        baseUrl: 'https://store.example/',
        versions: {
            1: 'api/v1/',
        },
        defaultVersion: 1,
    },
    wiki: {
        baseUrl: 'https://wiki.example/',
        versions: {
            1: 'api/v1/',
            2: 'api/v2/',
        },
        defaultVersion: 1,
    },
}

Then define the default server name

FetchApi.defaultServer = 'primary';

Usage

Now after setting up, you can simply request your paths

FetchApi.get({
    // request path: https://store.example/api/v1/items
    path: 'items',
}).then(m => {
    console.log(m);
});

Or you can specify the destination baseUrl and version

FetchApi.get({
    // request path: https://wiki.example/api/v2/faqs
    path: 'faqs',
    server: 'wiki',
    version: 2,
}).then(m => {
    console.log(m);
});

By default, it returns the response type as json however you can change the response to

• blob
• text
• arraybuffer

FetchApi.get({
    // request path: https://wiki.example/api/v2/faqs
    path: 'random-image',
    server: 'wiki',
    version: 2,
    responseType: 'blob'
}).then(m => {
    console.log(m);
});

Intercepting

You can intercept the request, for example to add the Authorization header

FetchApi.interceptors.request = (request, next) => {
    request.headers = new Headers(request.headers);
    request.headers.append('Authorization', 'bearer' + localStorage.token);
    return next(request);
};

Also, You can intercept the response, for example to throw as an error if response body has an error

FetchApi.interceptors.request = (response, request, next) => {
    const parsedResponse = next(response);
    
    if (parsedResponse.error) {
        throw parsedResponse;
    }
    return parsedResponse;
};

Issuing and Contributing

You can issue, fork, review on the package's github repo.

Support me :D

I would appreciate it if you would buymeacoffee

And also you can @ my Twitter @SpideymanThe1st