1.0.1 • Published 9 years ago
uberfetch v1.0.1
uberfetch
A thin layer over fetch which makes JSON the default, and turns HTTP errors into Promise rejections.
import uberfetch from 'uberfetch';
get JSON
uberfetch('/cats/10')
.then(res => /* do stuff */);
which is equivalent to:
function rejectOnRequestError(res) {
if (res.ok) return res;
return Promise.reject(new RequestError(res));
}
fetch('/cats/10', {
credentials: 'same-origin',
headers: {
'accept': 'application/json'
}
})
.then(rejectOnRequestError)
.then(res => /* do stuff */);
post JSON
let updatedCat = {id: 10, name: 'Keith'};
uberfetch.post('/cats/10', {body: updatedCat});
which is equivalent to:
let updatedCat = {id: 10, name: 'Keith'};
fetch('/cats/10', {
method: 'post',
body: JSON.stringify(updatedCat),
credentials: 'same-origin',
headers: {
'content-type': 'application/json'
'accept': 'application/json'
}
})
.then(rejectOnRequestError);
get HTML
// get some html
uberfetch('/cats/10', {accept: 'html'})
.then(res => /* do stuff */);
which is equivalent to:
fetch('/cats/10', {
credentials: 'same-origin',
headers: {
'accept': 'text/html'
}
})
.then(rejectOnRequestError)
.then(res => /* do stuff */);
catch typed errors
let cat = {id: 10, name: 'Keith'};
uberfetch.post('/cats/10', {body: cat})
.then(res => res.json())
.then(body => FlashMessage.show(`${body.name} saved`))
.catch(err => {
if (err instanceof uberfetch.RequestError) {
if (err.status == 422) {
return err.response.json()
.then(body =>
AlertModal.show(`Validation failed: ${body.validationErrors}`)
);
}
}
return Promise.reject(err);
});
Or with ES7 async/await
async function() {
let cat = {id: 10, name: 'Keith'};
try {
let response = await uberfetch.post('/cats/10', {body: cat})
let body = await response.json();
FlashMessage.show(`${body.name} saved`);
} catch (err) {
if (err instanceof uberfetch.RequestError) {
if (err.status == 422) {
let body = err.response.json()
AlertModal.show(`Validation failed: ${body.validationErrors}`);
return;
}
}
return Promise.reject(err);
}
}
API
Use uberfetch(url, opts)
exactly as you would fetch(url, opts)
, with the
following additional opts which can be provided in the opts object:
accept: string
shorthand for setting an accept header, which takes either a mime type, or a convenient short name likeform
,html
,text
etc.contentType: string
shorthand for setting an content-type header, which takes either a mime type, or a convenient short name likeform
,html
,text
etc.body: any
works like the normalfetch
body field, except that known content-types will be automatically serialized. Whenbody
is present, the default http method becomes POST.
In addition to the uberfetch()
function, the following convenience helpers are
available:
uberfetch.get()
automatically setsmethod: 'get'
uberfetch.post()
automatically setsmethod: 'post'
uberfetch.put()
automatically setsmethod: 'put'
uberfetch.patch()
automatically setsmethod: 'patch'
uberfetch.delete()
automatically setsmethod: 'delete'