Fetchface NPM | npm.io

Fetchface

A convenient interface for the Fetch API

Purpose

Fetchface provides a layer of convenience on top of the already-excellent Fetch API. It is geared toward making common web application tasks simple and easy, and abstracts away some of the boilerplate required to handle JSON responses from your API.

Note: By default, Fetchface sets the "Content-Type" request header to "application/json".

Installation

Install as a local dependency:

npm install -S fetchface

Usage

const fetchf = require('fetchface');

// Get a resource
fetchf.get('/userToken')
.then(userTokenData => {
  console.log(userTokenData);
});

// Post to an endpoint
fetchf.post('/users', {
  body: { name: 'Billy' },
})
.then(newUserData => {
  console.log(newUserData);
});

// Put to an endpoint
fetchf.put('/users/1234', {
  body: { name: 'Joe' },
})
.then(updatedUserData => {
  console.log(updatedUserData);
});

// Delete to an endpoint
fetchf.del('/users/1234')
.then(() => {
  console.log('Succes!');
});

// Set a global header to be used on all subsequent requests
fetchf.setHeaders({ 'Authorization': 'Basic ${userToken}' });

// Reset headers to their default state
fetchf.resetHeaders();

// Set a request header for a single request
fetchf.post('/users', {
  body: { name: 'Dave' },
  headers: { 'x-my-custom-header': 'awesome' },
})
.then(newUserData => {
  console.log(newUserData);
});

// Add a callback hook to be fired upon receiving specific response codes
fetchf.onResponseCode(401, () => {
  console.log('Unauthorized!');
});

While Fetchface is designed to work with JSON payloads, it can also handle FormData, which can be useful for uploading files.