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 wobbuffetchVia cdn:
<script src="https://unpkg.com/wobbuffetch/dist/wobbuffetch.min.js"></script>How to use
GET example:
import wfetch from 'wobbuffetch';
/* api data posts
"posts": [
{
"id": 1,
"title": "FRP for life",
"author": "anonymous"
},
{
"id": 2,
"title": "Imperative programming from hell",
"author": "Demo"
}
]
*/
wfetch.get('http://api.mydomain.com/posts').subscribe(res => console.log(res))
/* 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.get('http://api.mydomain.com/posts').flatMap(res => res.data).subscribe(post => console.log(post))
/* response with flatMap:
{ "id": 1, "title": "FRP for life", "author": "anonymous" },
{ "id": 2, "title": "Imperative programming from hell", "author": "Demo" }
*/POST example:
wfetch.post('http://api.mydomain.com/posts' {
data: {
title: 'How Reactive js works',
author: 'You'
}}).subscribe(res => console.log(res))
/* response:
{
data: { "id": 3, "title": "How wobbuffetch js works", "author": "You" },
status: 200,
statusText: 'Ok',
headers: { Content-Type: application/json },
}
*/
wfetch.post('http://api.mydomain.com/posts' {
data: {
title: 'Wobbuffetch js is handy',
author: 'me'
}}).map(res => res.data.title).subscribe(title => console.log(title))
/* response with map:
'Wobbuffetch js is handy'
*/Error handling:
function _success(response) {
console.log(`Success: ${response.status}`)
}
function _error({ response }) {
console.log(`Error: ${response.status}`)
}
wfetch.get('http://mydomain/api/posts/30').subscribe(_success, _error)
/* 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.
validateStatus: function (status) {
return status >= 200 && status < 300
}
}Config default:
import wfetch from 'wobbuffetch';
wfetch.defaults.baseURL = 'http://api.mydomain.com'
wfetch.defaults.headers = { 'Content-Type': 'text/xml' }
wfetch.defaults.responseType = '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.get('http://api.mydomain.com/posts').subscribe(res => {
// Do something ...
})with params:
wobbuffetch.get('http://api.mydomain.com/posts', { // http://api.mydomain.com/posts?title=you
params: { title: 'you' }
}).subscribe(res => {
// Do something ...
})HEAD
// Method 'head' has no 'data'
wobbuffetch.head('http://api.mydomain.com/posts').subscribe(res => {
console.log(res.data) // undefined
})DELETE
wobbuffetch.delete('http://api.mydomain.com/posts/1').subscribe(res => {
// Do something ...
})POST
// Wobbuffetch there is no options 'body' anymore, use 'data' instead
wobbuffetch.post('http://api.mydomain.com/posts', {
data: { // It can receives object literal now
title: 'something',
author: 'unknown'
}
}).subscribe(res => {
// Do something ...
})PUT
// Wobbuffetch has no option 'body' anymore, use 'data' instead
wobbuffetch.put('http://api.mydomain.com/posts', {
data: { // It can receive object literals now
title: 'something',
author: 'unknown'
}
}).subscribe(res => {
// Do something ...
})PATCH
// Wobbuffetch has no option 'body' anymore, use 'data' instead
wobbuffetch.patch('http://api.mydomain.com/posts', {
data: { // It can receives object literal now
title: 'something',
author: 'unknown'
}
}).subscribe(res => {
// Do something ...
})