0.1.5 • Published 4 years ago
@jontetz/jfetch v0.1.5
A tiny fetch wrapper built for the browser
Installing
Using npm:
$ npm i @jontetz/jfetch
Example
import jfetch from '@jontetz/jfetch';
Performing a GET
request
// Make a request for a user with a given ID
jfetch.get('/user?ID=12345')
.then(response => {
// handle success
console.log(response);
})
.catch(error => {
// handle error
console.log(error);
})
.finally(() => {
// always executed
});
// Optionally the request above could also be done as
jfetch.get('/user', {
ID: 12345
})
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
})
.finally(() => {
// always executed
});
// Want to use async/await? Add the `async` keyword to your outer function/method.
async function getUser() {
try {
const response = await jfetch.get('/user?ID=12345');
console.log(response);
} catch (error) {
console.error(error);
}
}
Performing a POST
request
// Make a request to create a new user
jfetch.post('/user', {
name: 'John Smith'
})
.then(response => {
// handle success
console.log(response);
})
.catch(error => {
// handle error
console.log(error);
})
.finally(() => {
// always executed
});
Performing a PUT
request
// Make a request to update a users name
jfetch.put('/user/123', {
name: 'John Smith'
})
.then(response => {
// handle success
console.log(response);
})
.catch(error => {
// handle error
console.log(error);
})
.finally(() => {
// always executed
});
Performing a DELETE
request
// Make a request for a user with a given ID
jfetch.del('/user/1234/delete')
.then(response => {
// handle success
console.log(response);
})
.catch(error => {
// handle error
console.log(error);
})
.finally(() => {
// always executed
});
// Optionally the request above could also be done as
jfetch.del('/user', {
ID: 12345
})
.then(response => {
// handle success
console.log(response);
})
.catch(error => {
// handle error
console.log(error);
})
.finally(() => {
// always executed
});
Aborting a request
// store a reference to the original promise
const request = jfetch.get('/user');
request.then(response => {
// handle success
console.log(response);
})
.catch(error => {
// handle an abort error
if(error === 'AbortError') return;
// handle error
console.log(error);
});
// abort the request
request.controller.abort();
Fetch options
You can modify the fetch itself by passing an object to the third parameter
jfetch.post('/user/12345', {
ID: 12345
}, {
responseType: 'text', // json, text or blob - this option is specific to jfetch
credentials: 'none', // this removes the default 'include' that is included in each request
headers: {
'Content-Type': 'application/json'
}
})
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
})
.finally(() => {
// always executed
});
Defaults
credentials: 'include'
is included in the requests by default to send cookie data. To remove that setting, you can pass credentials: 'none'
in the third parameter.
Set some default headers that should be in each request
Or set the base url that should be prepended to each request
import jfetch from '@jontetz/jfetch';
jfetch.defaults.headers['Content-Type'] = 'application/json';
jfetch.defaults.baseUrl = '/test';