I silently updated a couple of months ago with some improvements that make much easier — especially if you're using in Node. zlFetch coding zlFetch What is zlFetch? Just in case you don't know about it, is a wrapper over the native Fetch API. I've built because I wanted to make it easier to use the Fetch API. zlFetch zlFetch Now, without further ado, let me talk about the quality of life improvements I've made recently. Returning Errors and Debug Mode was built to catch and throw HTTP errors, so is promise-friendly. zlFetch zlFetch zlFetch('some-url')
  .then(/* do something when successful */)
  .catch(/* throw an error when unsuccessful */) Although this pattern follows the promise spec, it can be very unwieldy when used in an function. Typically, if you want to handle an error, you have to use a pattern. async try/catch try {
  const response = await zlFetch('some-url')
  // Do something with the response
} catch (error) {
  // Do something with the error
} I didn't like this, so I added a property to . This allows you to return the error message instead of throwing it. returnError zlFetch Then, you can use a standard conditionals to write your Fetch requests. if/else const { response, error } = await zlFetch('some-url', {
  returnError: true
})

if (response) // Do something with response
if (error) // Do something with error You can make it even easier by creating an instance of zlFetch with the options you want to use. More on this later. Debug Mode now contains a mode. zlFetch debug This lets you know exactly what you're sending in your request — so you don't have to check the Network Panel to know what you sent over. Just add the mode, and you can log what you're sending over. debug const { response, debug } = await zlFetch(
  'https://api.github.com/users/zellwk/repos',
  {
    query: { per_page: 100 },
    debug: true,
  }
)

console.log(debug) Creating a zlFetch Instance It's now possible to create a instance that contains the options you wish to use. zlFetch You can attach a base URL you wish to use over a couple of APIs... import { createZlFetch } from 'zl-fetch'

// Create the instance
const api = createZlFetch('https://your-api.com/api/v1')

// Using the instance
const response = await api.post('users', {
  body: {
    firstName: 'Zell',
    lastName: 'Liew',
    email: 'helloworld@gmail.com',
  },
}) ...attach options you typically use... import { createZlFetch } from 'zl-fetch'

// Create the instance
const api = createZlFetch({ returnError: true })

// Using the instance
const { response, error } = await api.post(/* ... */) ... or both! import { createZlFetch } from 'zl-fetch'

// Create the instance
const api = createZlFetch('https://your-api.com/api/v1', {
  returnError: true,
})

// Using the instance
const { response, error } = await api.post('users', {
  body: {
    firstName: 'Zell',
    lastName: 'Liew',
    email: 'helloworld@gmail.com',
  },
}) This feature helps a lot when you have to send many fetch requests in the same file. One great example is if you create a file to house all requests to a particular API. Another great example is when you have to send many requests when you . (I cover this in more detail in my ). test your APIs Node Workshop Removing node-fetch as a dependency. We have removed the dependency in since Node contains the Fetch API. node-fetch v6.0.0 v17 You will still be able to use as normal — nothing will change — if you're using Node and above. zlFetch v17 If you're using a legacy version of Node, we'll need you to import into your project before using . node-fetch zlFetch That's it for today! There are a few more qualify of life improvements that I've made, but I think this is big enough of an announcement today. I'll talk about other features in another newsletter to come. . Feel free to visit that if you want to have these articles delivered to your email first-hand whenever they're released! 🙂. By the way, this article was originally written on my blog Also published . here

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Revamping zlFetch: Enhancing Your Fetch API Experience in Node

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Quick CSS Guide: Crafting Neon Buttons with Glow Effects & Animations

How to Make Your Fetch Requests Production-Ready

Java bits: 0xFF and 0xFFL

The Noonification: Charting a Path for Global AI Regulation (11/14/2023)

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

100 Pieces of Programming Advice from the Book Clean Code by Robert Martin

A Quick CSS Guide: Crafting Neon Buttons with Glow Effects & Animations

How to Make Your Fetch Requests Production-Ready

Java bits: 0xFF and 0xFFL

The Noonification: Charting a Path for Global AI Regulation (11/14/2023)

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

100 Pieces of Programming Advice from the Book Clean Code by Robert Martin

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps