Fetch+

A convenient Fetch API library with first-class middleware support.

Features

Drop-in replacement for fetch().
Simple BREAD methods for consuming REST APIs.
A "queries" object option for building safe query strings more easily.
All options can be computed values: myHeaders: () => values
Custom middlewares to manipute requests, responses, and caught errors.
Useful middlewares and handlers (JSON/Auth/CSRF/Immutable etc) available as separate npm packages.
Fetch API Streams draft handler with an Observable interface.
Runs in Node and all browsers.

Installation

npm install --save fetch-plus  isomorphic-fetch

Additional middlewares

npm install --save fetch-plus-basicauth
npm install --save fetch-plus-bearerauth
npm install --save fetch-plus-csrf
npm install --save fetch-plus-immutable
npm install --save fetch-plus-json
npm install --save fetch-plus-oauth
npm install --save fetch-plus-stream
npm install --save fetch-plus-useragent
npm install --save fetch-plus-xml

Usage

import/require

import {fetch, createClient} from "fetch-plus";

fetch

fetch("http://some.api.example/v1", {
	query: {foo: "bar"},                // Query string object. So convenient.
	body: () => "R2-D2"                 // Computed values are computed.
});

createClient

Creates a RESTful client so middlewares can be added to it.

const client = createClient("http://some.api.example/v1");

client.addMiddleware

Create middlewares like: (request) => (response) => response

client.addMiddleware(
	(request) => {
		request.path += ".json";
		request.options.headers["Content-Type"] = "application/json; charset=utf-8";

		return (response) => response.json();
	}
);

client.request

request performs generic requests to the configured endpoint.

client.request("posts/25/comments", {
	method: "POST",
	body: {comment: "C-3PO"}
});

BREAD helpers that perform requests to the configured endpoint.

client.browse(            
	"posts"                    // A string...
);

client.add(
	["posts", 1, "comments"],  // ...or an array like ["posts", id, "comments"]
	{body: "C-3PO"}            // Regular Fetch API body option.
);

client.list|create|read|update|destroy

CRUD aliases that perform requests to the configured endpoint.

client.list(            
	"posts"                    // A string...
);

client.create(
	["posts", 1, "comments"],  // ...or an array like ["posts", id, "comments"]
	{body: "C-3PO"}            // Regular Fetch API body option.
);

handlers

Handlers take configuration and return functions to pass to .then().

// Transform JSON with fetch-plus-json.
import plusJson from "fetch-plus-json";

fetch("http://some.api.example/v1/posts").then(plusJson.handler({some:"config"}));

See example for more.

Community

Let's start one together! After you ★Star this project, follow me @Rygu on Twitter.

RickWong/fetch-plus

RickWong

Reviews

Repository Details