ES6 API Wrapper - About

A basic ES6 API class that wraps the fetch function and allows for a more dynamic and robust interface to interact with any API - easily extendable and mighty flexible.

What issues does this solve?

If you're wanting to interact with a complex API you'll want to make your API calls as structured and flexible as possible, this wrapper aims to solve that issue.

Simply extendable and suited for your API's needs, you can implement more complex functionality or simply use what's currently available.

How do I use it?

A demo implementation can be found in this projects index.html file.

Constructing the wrapper

To construct the API wrapper, you'll need to provide a host url (the API's domain), an object of endpoints and if you desire, a response type (Content-Type).

Endpoints format - Required properties

All endpoints should be listed in the endpoints object.

The endpoints object only requires two properties to function properly: url (string) and methods (array).

The url property must be the trailing endpoint that this endpoint should hit, for example if I wanted to hit a posts endpoint, my url property would be equal to /posts.

The methods property is an array of available HTTP methods that this endpoint has access to, for example my /posts endpoint has access to both POST and GET, so my methods property would be equal to ['POST', 'GET'].

API fetch format

To fetch data from an endpoint, you can call Api.fetch(method (string), endpoint (string), options (object)) - The fetch method returns a promise.

When fetching data you may pass options to each endpoint as you desire, however there are reserved properties which perform special functions, these being id (string), filter (object) and parent (string).

The id property will simply request the current endpoint with a resource identifier, for example http://myapi.com/posts/{id};

The filter property is an object containing anything you'd like to filter against this endpoint, creating a query string that implements your filters, for example http://myapi.com/posts?user=me.

The parent property is unique in that it can be used to retrieve a nested endpoint from a resource identifier. For example, if I have the endpoint /posts and that endpoint accepts a resource identifier such as /posts/{id}, but then also accepts a nested endpoint to retrieve comments like /posts/{id}/comments - the parent property will allow you to do this.

I would still create a new endpoint for my posts comments, however its parent would obviously be the endpoint that it nests under, in this case posts.