fetch-decorators
A set of composable ES7 decorators around the fetch
api
Automate things request and response body parsing so you don't have to.
No dependency (oh, except a fetch polyfill maybe)
Usage TL;DR:
npm i -S fetch-decorators
@extractJson @bodify @ { return `/users//messages`; } const messages = ; messages content: 'Hello World' public: true draft: false;
Decorators
@fetchify
: decorates a function returning a url to afetch
call with your options.@bodify
: prepare passed data (and extra options) into fetch-ready body options.@extractJson
,@extractText,
@extractBlob
: decorates a function returning aResponse
to extract its result as json, text or blob.@extractAuto
: decorates a function returning aResponse
to extract its result automatically based on responseContent-Type
header.
These decorators have been designed to be composable, give it a try!
@fetchify(options:?object)
This helper wraps the original function into a fetch call so it may just return a string, and then be called with optional data, headers, options.
(originalArgs) => url:string
becomes:
(originalArgs) => (options:?object) => fetchResponse:promise
; { thisbaseUrl = baseUrl; } @ { return `/users/`; } @ { return `/users`; } const userApi = '/api'; userApi body: JSON)
@bodify
Takes body data and options and calls the decorated function with a proper fetch options
object where options.body
is passed data as a string.
(options) => orignalResult
becomes:
(originalArgs) => (data:object, extraOptions:?object) => orignalResult(options)
; @bodify { return { return ; }; } const messages = ;const messages = content: 'Hello' draft: false;const options = method: 'POST' ; usersmessage options;
@extractJson, @extractText, @extractBlob
These decorators wrap functions returning a fetch promise with the matching Response extraction function.
(originalArgs) => fetchResponse:promise
becomes:
(originalArgs) => (options:?object) => extractionResult:promise
where the extractionResult
promise resolves with : {response:Response, data:any}
; @extractJson { return ; } const users = ; users;
@extractAuto
This extractor has the same signature and behaviour as other extractors but will use the Reponse Content-Type
header to determine the right Response method to use for data extraction.
Content types are matched this way:
'application/json': 'json'
'text/plain': 'text'
'default': 'blob'
Composition
All these decorators where designed so it's easy to use them together, just stack them! Note: obviously, the order matters.
; @extractJson @bodify @ { return `/users//messages`; } // Approximate equivalent without decorators // Thanks to ES6, the volume of code is roughly the same // But the complexity is higher and you'll probably // have a lot of code duplication { return ; } const messagesApi = ; // Request body, as an objectconst message = content: 'Hello World' public: true draft: false; // Some extra optionsconst authHeaders = headers: 'X-AUTH-MUCH-SECURE': '123FOO456BAR' ; messagesApimessage authHeaders;
FAQ
Is it just syntactic sugar?
Yes.
I have a more complex case where my [ headers are dynamic | I have to change fetch options | whatever ]. How do I do?
Then you should manually write your call to fetch
instead of shoehorning these decorators in your code.