Simple Fetch API wrapper that aims to address its core issues

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 using params for GET and body for POST 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.