futch doesn't work as fetch

[kopax]

After succesfully trying configuring fetch to upload images on android/ios/web, I wanted to test futch,

However, it does not work, this is how my code looks like, I just replace fetch, with futch:

const res = await futch(url, requestOptions);
alert(res.status);

alert will display {"isTrusted":true}, I expected 200.

I have tried to add withCredentials = true to support CORS, but that didn't help.

This is futch.js:

const futch = (url, options = {}, onProgress) => new Promise((res, rej) => {
  const xhr = new XMLHttpRequest();
  xhr.withCredentials = true;
  xhr.open(options.method || 'get', url);
  for (const k in options.headers||{})
    xhr.setRequestHeader(k, options.headers[k]);
  // Object.keys(opts.headers || {}).forEach((key) => {
  //   xhr.setRequestHeader(key, opts.headers[key]);
  // });
  xhr.onload = (e) => res(e.target);
  xhr.onerror = rej;
  if (xhr.upload && onProgress) {
    xhr.upload.onprogress = onProgress;
  }
  xhr.send(options.body);
});
export default futch;

• Any idea why?
• How can I get the progress in React native ?

[kopax]

I solved it as follow:

/**
 * @public
 * @description
 * Unfortunately, fetch doen't support progress. But we can use xhr which support progress.
 *
 * I think this way using two ways which are fetch and futch in networking is not pretty.
 * So I overwrite fetch.
 *
 * ```javascript
 * import futch from './src/api';
 * const originalFetch = fetch
 * global.fetch = (url, opts) => {
 *   console.log(opts.onProgress)
 *   if (opts.onProgress && typeof opts.onProgress === 'function') {
 *     return futch(url, opts, opts.onProgress)
 *   } return originalFetch(url, opts)
 * }
 * export default class photoUploadTest extends Component {
 *  ...
 * }
 * ```
 *
 * If you add this in your top file like `index.ios.js`, you can use fetch with progress.
 *
 * ```javascript
 * fetch(url + '/array', {
 * method: 'post',
 * body: data,
 * onProgress: (e) => {
 *     const progress = e.loaded / e.total;
 *     console.log(progress);
 *     this.setState({
 *       progress,
 *     });
 *   }
 * }).then((res) => console.log(res), (e) => console.log(e))
 * ```
 *
 * To overwrite fetch:
 *
 * ```javascript
 * import futch from './src/api';
 * const originalFetch = fetch
 * global.fetch = (url, opts) => {
 *   console.log(opts.onProgress)
 *   if (opts.onProgress && typeof opts.onProgress === 'function') {
 *     return futch(url, opts, opts.onProgress);
 *   }
 *   return originalFetch(url, opts);
 * }
 * ```
 *
 * @param {string} url - the url to futch to
 * @param {object} options - futch options (like fetch options)
 * @param {function} onProgress - the function to be called on progress event
 * @returns {Promise<unknown>} - the pending request
 * @example
 * import futch from './futch';
 *
 * const data = new FormData();
 * data.append('name', 'testName');
 * data.append('photo', {
 *   uri: source.uri,
 *   type: 'image/jpeg',
 *   name: 'testPhotoName'
 * });
 *
 *
 * futch(url, {
 *   method: 'post',
 *   body: data
 * }, (progressEvent) => {
 *   const progress = progressEvent.loaded / progressEvent.total;
 *   console.log(progress);
 * }).then((res) => console.log(res), (err) => console.log(err))
 */
const futch = (url, options = {}, onProgress) => new Promise((res, rej) => {
  if (!options.headers) {
    options.headers = {};
  }
  const xhr = new XMLHttpRequest();
  xhr.withCredentials = true;
  xhr.open(options.method || 'GET', url);
  if (options.headers instanceof Headers) {
    for (const pair of options.headers.entries()) {
      xhr.setRequestHeader(pair[0], pair[1]);
    }
  } else {
    Object.keys(options.headers).forEach((key) => {
      xhr.setRequestHeader(key, options.headers[key]);
    });
  }

  xhr.onload = (e) => res(e.target);
  xhr.onerror = rej;
  if (xhr.upload && onProgress) {
    xhr.upload.onprogress = onProgress;
  }
  xhr.send(options.body);
});

export default futch;