There’s other wrappers that are somewhat similar, but I think some of main aspects FarFetch
stands out from others is:
- Its philosophy of trying to stay as close as possible to vanilla Fetch API, but merely improve upon it.
- Its unified
data
property, instead of usingparams
forGET
andbody
forPOST
for instance. - File uploading, which I will showcase the difference between
Fetch API
here, with multiple files.
Fetch API
async uploadFiles() {
const files = document.querySelector('#my-files').files;
const data = { name: 'Jason', location: 'NY' };
const formData = new FormData();
Object.keys(data).forEach((key) => {
formData.append(key, data[key]);
});
files.forEach((file) => {
formData.append('files[]', file);
});
await fetch('https://website.com/people', {
method: 'POST',
body: formData,
});
if(response.status !== 200) throw new Error('Server error.');
}
FarFetch
async uploadFiles() {
const files = document.querySelector('#my-files').files;
await ff.post('https://website.com/people', {
files,
data: { name: 'Jason', location: 'NY' },
});
}
Please let me know what you think of this Fetch API wrapper.