fetch.js

fetch.js

class Ajax {
  constructor(opts) {
    this.callbacks = {}
    this.on = this.on.bind(this)
    this.fetch = this.fetch.bind(this)
    this.error = this.error.bind(this)
    this.data = this.data.bind(this)
    this.complete = this.complete.bind(this)
    return {...this.methods}
  }

  /**
   * allow chaning mehtods by returning thes
   *
   * @return {{on: function, fetch: function}}
   *   public mehtods
   */
  get methods() {
    return {
      on: this.on.bind(this),
      fetch: this.fetch.bind(this)
    }
  }

  /**
   * Transform response headers to an object
   *
   * @param  {Header} headers
   *   The headers
   * @return {Array}
   */
  responseHeaders(headers) {
    return [...headers.entries()]
      .reduce((previous, [key, value]) =>
        ({...previous, [key]: value}), {} )
  }

  fetch(url, options) {
    fetch(url, options).then(response => {
      this.callbacks.data(response.blob())
      this.callbacks.complete({
        headers: this.responseHeaders(response.headers),
        statusCode: response.status
      })
    }).catch(err => this.callbacks.error(err))

    return this
  }

  error(fn) {
    this.callbacks.error = fn
  }

  data(fn) {
    this.callbacks.data = fn
  }

  complete(fn) {
    this.callbacks.complete = fn
  }

  on(e, fn) {
    switch(e) {
      case 'error':
        this.error(fn)
        break
      case 'data':
        this.data(fn)
        break
      case 'complete':
        this.complete(fn)
        break
      default:
        break
    }
    return this
  }
}

export default function (options) {
  return new Ajax(options)
}