Need help with ohmyfetch?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

nuxt-contrib
153 Stars 2 Forks MIT License 45 Commits 1 Opened issues

Description

A better fetch API. Works on node, browser and workers.

Services available

!
?

Need anything else?

Contributors list

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')

✔️ 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
(`/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 💖

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.