easy-fetch-api

(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.