fetchURL.js

example.js

fetchURL("/").then(({ responseText }) => console.log(responseText))

const request = fetchURL("/")
request.cancel()
request.then(() => console.log("NOT HAPPENING"))

fetchURL.js

/**
 * fetches a given URL through `XMLHttpRequest`.
 * like `fetch` but cancellable.
 * 
 * @param {string} url
 * @param {object} [options]
 * @param {string} [options.method=GET]
 * @param {string} [options.body=null]
 * @param {object} [options.headers={}]
 * @param {boolean} [options.withCredentials=false]
 * @returns {object}
 */
const fetchURL = (url, { method = "GET", body = null, headers = {}, withCredentials = false } = {}) => {
  const xhr = new XMLHttpRequest()
  return Object.assign(
    new Promise((resolve, reject) => {
      xhr.open(method, url, true)
      Object.keys(headers).forEach((key) => {
        xhr.setRequestHeader(key.toLowerCase(), headers[key])
      })
      xhr.withCredentials = withCredentials
      xhr.onreadystatechange = () => {
        if(xhr.readyState === 4 && xhr.status !== 0 && xhr.statusText !== "abort") {
          resolve(xhr)
        }
      }
      xhr.send(body)
    }),
    {
      cancel: () => {
        xhr.abort()
      },
    }
  )
}