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

wonderful-fetch

v1.3.0

Published

A wrapper around fetch.

Downloads

11,192

Readme

🌐 Wonderful Fetch Works in Node AND browser environments

Yes, this module works in both Node and browser environments, including compatibility with Webpack and Browserify!

⚡️ Features

  • Intuitive error handling
  • Download files directly to drive

🪦 The old way

You have to manually check if the response is ok and then parse the response as JSON.

fetch('https://httpbin.org/json')
  .then((response) => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

🦄 The Wonderful Fetch way

With Wonderful Fetch, you can automatically parse the response as JSON and handle all http errors with a single line of code.

wonderfulFetch('https://httpbin.org/json', {response: 'json'})
  .then((response) => console.log(response))
  .catch((error) => console.error(error));

📦 Install Wonderful Fetch

Option 1: Install via npm

Install with npm if you plan to use wonderful-fetch in a Node project or in the browser.

npm install wonderful-fetch

If you plan to use wonderful-fetch in a browser environment, you will probably need to use Webpack, Browserify, or a similar service to compile it.

const wonderfulFetch = require('wonderful-fetch');
wonderfulFetch();

Option 2: Install via CDN

Install with CDN if you plan to use Wonderful Fetch only in a browser environment.

<script src="https://cdn.jsdelivr.net/npm/wonderful-fetch@latest/dist/index.min.js"></script>
<script type="text/javascript">
  var wonderfulFetch = WonderfulFetch;
  wonderfulFetch();
</script>

🚀 Using Wonderful Fetch

After you have followed the install step, you can start using wonderful-fetch to make requests to any URL

wonderfulFetch(url, options)

Make a request to the supplied url with options.

This library returns a Promise that will resolve if the status code is in the 200 - 299 range and will reject if the status code is outside that range or if the download of the file fails.

options

The options for wonderfulFetch(url, options) are as follows.

  • url string: The URL of the resource
    • Acceptable Values: any
    • Default: null
  • options object: Advanced options
    • method string: The type of request
      • Acceptable Values: get, post, delete, put, patch
      • Default: get
    • response string: Automatically format the response
      • Acceptable Values: raw, json, text
      • Default: raw
    • timeout number: The request will automatically timeout after this
      • Acceptable Values: any
      • Default: 60000
    • tries number: The amount of attempts to the URL. Enter -1 for infinity.
      • Acceptable Values: any
      • Default: 1
    • cacheBreaker boolean, any: Will append ?cb={currentTime} to the URL if true or whatever value you specify.
      • Acceptable Values: true, false, any
      • Default: true
    • download string: Will download the response to this path
      • Acceptable Values: any
      • Default: null

Examples

Basic Fetch

Perform a basic fetch request.

wonderfulFetch('https://httpbin.org/status/200', {method: 'get'})
  .then((response) => console.log(response))
  .catch((error) => console.error(error));
Basic Fetch JSON

Perform a basic fetch request and return the response as JSON.

wonderfulFetch('https://httpbin.org/status/200', {method: 'get', response: 'json'})
  .then((response) => console.log(response))
  .catch((error) => console.error(error));
Download File

Download a file to the specified download path. Node.js only.

wonderfulFetch('https://httpbin.org/image/png', {download: './image.png'})
  .then((response) => console.log(response))
  .catch((error) => console.error(error));
Handle Errors with catch

Handle errors with the catch method.

wonderfulFetch('https://httpbin.org/status/404', {method: 'get'})
  .then((response) => console.log(response))
  .catch((error) => console.error(error));

📚 Extending Capabilities

For a more in-depth documentation of this library and the Wonderful Fetch service, please visit the official Wonderful Fetch website.

❓ What Can Wonderful Fetch do?

Wonderful Fetch is a free fetch api that helps you make requests in Node.js or the browser.

📝 Final Words

If you are still having difficulty, we would love for you to post a question to the Wonderful Fetch issues page. It is much easier to answer questions that include your code and relevant files! So if you can provide them, we'd be extremely grateful (and more likely to help you find the answer!)

🎉 Projects Using this Library

Somiibo: A Social Media Bot with an open-source module library. JekyllUp: A website devoted to sharing the best Jekyll themes. Slapform: A backend processor for your HTML forms on static sites. SoundGrail Music App: A resource for producers, musicians, and DJs. Hammock Report: An API for exploring and listing backyard products.

Ask us to have your project listed! :)