XHR Promisified

about.md

Fetch (xhr promisified)

Lightweight implementation of fetch api

Usage

import fetch from './fetch'

API

• fetch(url[, options])

  fetch('https://google.com')
    .then(response => console.log(response))
    .catch(error => console.log(error))

  Options

  • method - http method (default is GET)
  • decoder - body decoder (default is JSON.parse, for none set to null)
  • headers - http headers
  • body - http payload (only supported on methods other than GET)

  Response Object

  • status - response status code
  • statusText - response status text
  • body - decoded or raw body depending on decoder setting
  • rawBody - raw response body
  • request - xhr request object

fetch.js

export default function (url, options) {
  options = options || {
    method: 'GET',
    decoder: JSON.parse,
    headers: {},
    body: null
  }

  return new Promise((resolve, response) => {
    let xhr = new XMLHttpRequest()
    let headers = Object.keys(options.headers)
    let data = options.body

    xhr.open(options.method, url)

    xhr.onload = () => {
      let method = this.status > 300 
        ? reject
        : resolve

      return method({
        status: this.status,
        statusText: xhr.statusText,
        body: options.decoder ? options.decoder(xhr.response) : xhr.response,
        rawBody: xhr.response,
        request: xhr
      })
    }

    xhr.onerror = () => {
      return reject(new Error("unable to complete " + options.method + " request for: " + url))
    }

    headers.forEach(key => xhr.setRequestHeader(key, options.headers[key]))
    
    if (options.method !== 'GET') {
      if (data && typeof data === 'object') {
        data = Object
          .keys(data)
          .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
          .join('&')
      }

      xhr.send(data)
    } else {
      xhr.send()
    }
  })
}