(easy) Fetch API

Easy to use and lightweight wrapper for the Fetch API.

Provides CRUD methods
Each method returns a Promise, therefore works with async/await
Automatically sets required headers (for POST, PUT and PATCH it sets Accept and Content-Type headers to application/json)
Provides method for easily posting form data
Pre-request and post-request callbacks for an easier integration with store-based architectures like Redux - see example

This library does not provide a polyfill for the Fetch API.

Installation

npm install --save easy-fetch-api

Usage

import Api, { RESPONSE_TYPES } from 'easy-fetch-api';

Api.get({ url: '/api/me', callback: console.log });

await Api.post({ url: '/api/register', data: { email: 'value', password: 'value' } });

// Set headers on each request
Api.get({ url: '/api/me', headers: { Authorization: 'Bearer token' } });

// Or set headers globally and they are automatically passed on each request
Api.setHeaders({ Authorization: 'Bearer token' });

console.log(RESPONSE_TYPES) // { json: 'json', blob: 'blob', text: 'text' }

More detailed usage examples below in the docs of each method:

SET BASE URL

Set a base URL (if needed).

This will be used to prefix all later URLs

Api.setBaseUrl('https://api-domain.com');

GET

Performs a HTTP Get request.

Api.get({
    url: '/api/get',
	headers: { Authorization: 'token' },
	query: { q1: 'value', qn: 'value' },
	responseType: Api.RESPONSE_TYPES.blob,
	callback: () => {}
)};

url (String, required) - URL to make request to
headers (Object, optional) HTTP Headers object in the form of { headerKey: headerValue }
query (Object, optional) Query object in the form of { queryKey: queryValue }
callback (Function, optional) Function called after the server responds, with resulting data
responseType (String, optional) one of the RESPONSE_TYPES allowed values
returns Promise

POST (json)

Performs a HTTP Post request.

Api.post({
	url: '/api/post',
	data: { email: 'value', password: 'value' },
	headers: { Authorization: 'token' },
	callback: () => {}
)};

url (String, required) - URL to make request to
data (Object, required) - Object body to be posted
headers (Object, optional) HTTP Headers object in the form of { headerKey: headerValue }. Note that there are two preset heders: { Accept: 'application/json', 'Content-Type': 'application/json' }. You can override them using this parameter
callback (Function, optional) Function called after the server responds, with resulting data
responseType (String, optional) one of the RESPONSE_TYPES allowed values
returns Promise

POST FORM

Performs a HTTP Post request with form data.

Api.postForm({
	url: '/api/postForm',
	data: 'email=value&password=value',
	headers: { Authorization: 'token' },
	callback: () => {}
)};

url (String, required) - URL to make request to
data (String, required) - Form data to be posted
headers (Object, optional) HTTP Headers object in the form of { headerKey: headerValue }. Note that there are two preset heders: { Accept: 'application/json', 'Content-Type': 'application/json' }. You can override them using this parameter
callback (Function, optional) Function called after the server responds, with resulting data
returns Promise

PUT

Performs a HTTP Put request.

Api.put({
	url: `/api/put/${id}`,
	data: { email: 'value', password: 'value' },
	headers: { Authorization: 'token' },
	callback: () => {}
)};

url (String, required) - URL to make request to
data (Object, required) - Object body to be updated
headers (Object, optional) HTTP Headers object in the form of { headerKey: headerValue }. Note that there are two preset heders: { Accept: 'application/json', 'Content-Type': 'application/json' }. You can override them using this parameter
callback (Function, optional) Function called after the server responds, with resulting data
responseType (String, optional) one of the RESPONSE_TYPES allowed values
returns Promise

PATCH

Performs a HTTP Patch request.

Api.patch({
	url: `/api/put/${id}`,
	data: { email: 'value', password: 'value' },
	headers: { Authorization: 'token' },
	callback: () => {}
)};

url (String, required) - URL to make request to
data (Object, required) - Object body to be updated
headers (Object, optional) HTTP Headers object in the form of { headerKey: headerValue }. Note that there are two preset heders: { Accept: 'application/json', 'Content-Type': 'application/json' }. You can override them using this parameter
callback (Function, optional) Function called after the server responds, with resulting data
responseType (String, optional) one of the RESPONSE_TYPES allowed values
returns Promise

DELETE

Performs a HTTP Delete request.

Api.delete({
	url: '/api/delete',
	headers: { Authorization: 'token' },
	query: { q1: 'value', qn: 'value' },
	callback: () => {}
)};

url (String, required) - URL to make request to
headers (Object, optional) HTTP Headers object in the form of { headerKey: headerValue }
query (Object, optional) Query object in the form of { queryKey: queryValue }
callback (Function, optional) Function called after the server responds, with resulting data
returns Promise

CallBefore and Callback

Functions to be called before the request is fired and after the server responds, respectively. Facilitates integration with store-based architectures like Redux.

Api.get({
	url: '/api/get',
	callBefore: () => { dispatch({ type: ACTIONS.LOADING }) },
	callback: result => { dispatch({ type: ACTIONS.LOADING_DONE, data: result }) }
)};

Licence

The code is open-source and available under the MIT Licence. More details in the LICENCE.md file.

raulrene / easy-fetch-api