nuxt-contrib/ ohmyfetch
About the developer
153 Stars 
2 Forks 
MIT License 
45 Commits 
1 Opened issues 
Description
A better fetch API. Works on node, browser and workers.
Services available
Contributors list
🚀 Quick Start
Install:
# npm npm i ohmyfetchyarn
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
$fetchSmartly parses JSON and native values using destr and fallback to text if cannot parse
const { users } = await $fetch('/api/users')
✔️ Handling Errors
$fetchAutomatically throw errors when
response.okis
falsewith a friendly error message and compact stack (hiding internals).
Parsed error body is available with
error.data. You may also use
FetchErrortype.
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
baseURLoption,
$fetchprepends it with respecting to trailing/leading slashes and query params for baseURL using ufo:
await $fetch('/config', { baseURL })
✔️ Adding params
By using
paramsoption,
$fetchadds 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 probably need to transpile
- You need to polyfill
fetch
global for supporting legacy browsers like using unfetch
❓ FAQ
Why export is called
$fetchinstead of
fetch?
Using the same name of
fetchcan 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
$fetchname.
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 💖