wobbuffetch
Reactive wrapper for HTTP requests using Fetch API
Why
Handling asynchronous and event-based requests is boring. Sometimes we need to manipulate data loaded from a server with only what we need, merge, debounce, distinct and so on. Wobbuffetch is a reactive http library that wraps Fetch API along with a set of observable collections that make your life easier.
Features
- Easy to use
- Fetch API features
- Observable api collections (RxJS)
- Automatic transforms for JSON data
- Runs from browser and server
Learn
- About Fetch API: Using Fetch MDN, fetch API - david walsh
- About ReactiveX: RxJS Doc, RxJS Github
- See the Observable super power in RX Marbles - Interactive diagrams
Installing
Via npm:
$ npm install wobbuffetch
Via cdn:
How to use
GET example:
; /* api data posts"posts": [ { "id": 1, "title": "FRP for life", "author": "anonymous" }, { "id": 2, "title": "Imperative programming from hell", "author": "Demo" } ]*/ wfetch /* response:{ data: [ { "id": 1, "title": "FRP for life", "author": "anonymous" }, { "id": 2, "title": "Imperative programming from hell", "author": "Demo" } ], status: 200, statusText: 'Ok', headers: { Content-Type: application/json },}*/ wfetch /* response with flatMap: { "id": 1, "title": "FRP for life", "author": "anonymous" }, { "id": 2, "title": "Imperative programming from hell", "author": "Demo" }*/
POST example:
wfetch /* response:{ data: { "id": 3, "title": "How wobbuffetch js works", "author": "You" }, status: 200, statusText: 'Ok', headers: { Content-Type: application/json },}*/ wfetch /* response with map: 'Wobbuffetch js is handy'*/
Error handling:
{ console} { console} wfetch /* response Error: 'Error: 404'*/
To learn more see RxJS from promise.
Default configuration
We often need to set additional request options, but some of them are default in the wobbuffetch library. For more information and options check out Fetch API options.
An important change in Fetch API is that the option body
is now data
in wobbuffetch.
baseUrl: '' // Base URL to use in every request headers: 'Content-Type': 'application/json' // Fetch API: Object literal as headers credentials: 'same-origin' // Fetch API: Only send cookies if the URL is from the same origin as the calling script. cache: 'default' // Fetch API: The browser looks for a matching request in its HTTP cache. responseType: 'json' // Methods to extract the body from the response (ex: 'arrayBuffer', 'blob', 'json', 'text') // Defines if the response will be resolved or rejected given a status. { return status >= 200 && status < 300 }
Config default:
; wfetchdefaultsbaseURL = 'http://api.mydomain.com'wfetchdefaultsheaders = 'Content-Type': 'text/xml' wfetchdefaultsresponseType = 'text'
Response schema
status: 200 // HTTP status code from the server statusText: 'OK' // HTTP status message from the server headers: {} // Headers from the server data: {} // Response data requested from the server ( 'HEAD' method does not receive this)
Methods
Instance methods: wobbuffetch#method(url[, config])
GET
wobbuffetch
with params:
wobbuffetch
HEAD
// Method 'head' has no 'data'wobbuffetch
DELETE
wobbuffetch
POST
// Wobbuffetch there is no options 'body' anymore, use 'data' insteadwobbuffetch
PUT
// Wobbuffetch has no option 'body' anymore, use 'data' insteadwobbuffetch
PATCH
// Wobbuffetch has no option 'body' anymore, use 'data' insteadwobbuffetch