npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

wobbuffetch

v1.1.1

Published

Reactive wrapper for Fetch API

Downloads

11

Readme

Wobbuffet

wobbuffetch

Build Status Coverage Status js-standard-style

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

Installing

Via npm:

$ npm install wobbuffetch

Via 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 ...
})

by

@pedrotcaraujo