Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

ohmyfetch

Package Overview
Dependencies
Maintainers
1
Versions
42
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ohmyfetch

oh-my-fetch

  • 0.1.8
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
37K
decreased by-2.06%
Maintainers
1
Weekly downloads
 
Created
Source

npm version npm downloads Github Actions Codecov bundle

😱 ohmyfetch

🚀 Quick Start

Install:

# npm
npm i ohmyfetch

# yarn
yarn add ohmyfetch

Import:

// Universal (requires global.fetch)
import { $fetch } from 'ohmyfetch'

// NodeJS / Isomorphic
import { $fetch } from 'ohmyfetch/node'

// NodeJS / Isomorphic (CommonJS)
const { $fetch } = require('ohmyfetch/node')
Spoiler

✔️ Parsing Response

$fetch Smartly parses JSON and native values using destr and fallback to text if cannot parse

const { users } = await $fetch('/api/users')

✔️ JSON Body

$fetch automatically stringifies request body (if an object is passed) and adds JSON Content-Type headers (for put, patch and post requests).

const { users } = await $fetch('/api/users', { method: 'POST', body: { some: 'json' } })

✔️ Handling Errors

$fetch Automatically throw errors when response.ok is false with a friendly error message and compact stack (hiding internals).

Parsed error body is available with error.data. You may also use FetchError type.

await $fetch('http://google.com/404')
// FetchError: 404 Not Found (http://google.com/404)
//     at async main (/project/playground.ts:4:3)

In order to bypass errors as reponse you can use error.data:

await $fetch(...).catch((error) => error.data)

✔️ Type Friendly

Response can be type assisted:

const { article } = await $fetch<Article>(`/api/article/${id}`)
// Auto complete working with article.id

✔️ Adding baseURL

By using baseURL option, $fetch prepends it with respecting to trailing/leading slashes and query params for baseURL using ufo:

await $fetch('/config', { baseURL })

✔️ Adding params

By using params option, $fetch adds params to URL by preserving params in request itself using ufo:

await $fetch('/movie?lang=en', { params: { id: 123 } })

🍣 Access to Raw Response

If you need to access raw response (for headers, etc), can use $fetch.raw:

const response = await $fetch.raw('/sushi')

// response.data
// response.headers
// ...

📦 Bundler Notes

  • All targets are exported with Module and CommonJS format and named exports
  • No export is transpiled for sake of Modern syntax
    • You probably need to transpile ohmyfetch package with babel for ES5 support
  • You need to polyfill fetch global for supporting legacy browsers like using unfetch

❓ FAQ

Why export is called $fetch instead of fetch?

Using the same name of fetch can be confusing since API is different but still it is a fetch so using closest possible alternative.

Why not having default export?

Default exports are always risky to be mixed with CommonJS exports.

This also guarantees we can introduce more utils without breaking the package and also encourage using $fetch name.

Why not transpiled?

By keep transpiling libraries we push web backward with legacy code which is unneeded for most of the users.

If you need to support legacy users, can optionally transpile the library in build pipeline.

License

MIT. Made with 💖

FAQs

Package last updated on 22 Feb 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc