Skip to content

Make REST requests using the Fetch API as easy as typing npm install and avoid having to manually handle headers and response parsing.

License

Notifications You must be signed in to change notification settings

raulrene/easy-fetch-api

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

59 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

Make REST requests using the Fetch API as easy as typing npm install and avoid having to manually handle headers and response parsing.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published