(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

1npm install --save easy-fetch-api

Usage

1import Api, { RESPONSE_TYPES } from 'easy-fetch-api';
2
3Api.get({ url: '/api/me', callback: console.log });
4
5await Api.post({ url: '/api/register', data: { email: 'value', password: 'value' } });
6
7// Set headers on each request
8Api.get({ url: '/api/me', headers: { Authorization: 'Bearer token' } });
9
10// Or set headers globally and they are automatically passed on each request
11Api.setHeaders({ Authorization: 'Bearer token' });
12
13console.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

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

---

GET

Performs a HTTP Get request.

1Api.get({
2    url: '/api/get',
3	headers: { Authorization: 'token' },
4	query: { q1: 'value', qn: 'value' },
5	responseType: Api.RESPONSE_TYPES.blob,
6	callback: () => {}
7)};

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

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

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

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

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

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

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

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

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

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

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

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

Licence

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