haul
convenient and modern wrapper around fetch with smart extensible defaults
Requires fetch
support.
install
# npm
npm i @elonehoo/haul
# yarn
yarn add @elonehoo/haul
# pnpm
pnpm i @elonehoo/haul
usage
usually we will write:
// creating a new user
fetch('/api/users', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: 'Elone Hoo',
password: 'elonehoooohenole',
}),
}).then((response) => {
if (response.status >= 200 && response.status < 300) {
return response.json()
}
// reject if the response is not 2xx
throw new Error(response.statusText)
}).then((user) => {
// ...
})
but now it can be written as
const users = haul('/api/users')
users.post({
name: 'Elone Hoo',
password: 'elonehoooohenole',
}).then((user) => {
// ...
})
creating a small layer to communicate to your API:
// api/users
import { haul } from '@elonehoo/haul'
const users = haul('/api/users', globalOptions)
export function getUserById(id) {
return users.get(id)
}
export function createUser(userData) {
return users.post(userData)
}
adding Authorization tokens:
// api/users
import { haul } from '@elonehoo/haul'
const todos = haul('/api/todos', globalOptions)
export function setToken(token) {
// todos.options will be used for all requests
todos.options.headers.Authorization = 'token ' + token
}
export function clearToken() {
delete todos.options.headers.Authorization
}
export function createTodo(todoData) {
return todo.post(todoData)
}
you can also globally add default options to all haul instances:
import { defaults } from '@elonehoo/haul'
defaults.headers.Authorization = 'Bearer token'
typescript
all methods defined on a haul
instance accept a type generic to type their return:
const todos = haul('/api/todos', globalOptions)
todos.get<{ text: string, id: number, isFinished: boolean }[]>().then(todos => {
// todos is correctly typed
})
Credits
Thanks to: