util-request

util-request is a fetch wrapper.

Master

Dev

Table of Contents

• Content
• Reminders
• Quick start

Content

request.js (fetch wrapper)

Usage:

import request from 'request-utils'

Content:

import 'whatwg-fetch';

/**
 * Parses the JSON returned by a network request
 *
 * @param  {object} response A response from a network request
 *
 * @return {object}          The parsed JSON from the request
 */
function parseJSON(response) {
  if (response.status === 204 || response.status === 205) {
    return null;
  }
  return response.json();
}

/**
 * Checks if a network request came back fine, and throws an error if not
 *
 * @param  {object} response   A response from a network request
 *
 * @return {object|undefined} Returns either the response, or throws an error
 */
function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response;
  }

  const error = new Error(response.statusText);
  error.response = response;
  throw error;
}

/**
 * Requests a URL, returning a promise
 *
 * @param  {string} url       The URL we want to request
 * @param  {object} [options] The options we want to pass to "fetch"
 *
 * @return {object}           The response data
 */
export default function request(url, options) {
  return fetch(url, options)
    .then(checkStatus)
    .then(parseJSON);
}

utils.js

Usage:

import { toQueryString, getParameter, getCookie } from 'util-request';

Content:

/**
 * Transform object to query string
 * @param params
 * @returns {string}
 */
export function toQueryString(params) {
  const esc = encodeURIComponent;
  return Object.keys(params)
    .map((k) => esc(k) + '=' + esc(params[k])) // eslint-disable-line prefer-template
    .join('&');
}

/**
 * Return a parameter from a url or by default window.location.href
 * @param name
 * @param url
 * @returns {*}
 */
export function getParameter(name, customUrl) {
  if (!customUrl) customUrl = window.location.href; // eslint-disable-line no-param-reassign
  name = name.replace(/[[\]]/g, '\\$&'); // eslint-disable-line no-param-reassign
  const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`);
  const results = regex.exec(customUrl);
  if (!results) return null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

/**
 * return a cookie from it's name
 * @param name
 * @returns {String} the cookie value, null if non existent
 */
export function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  return parts.length === 2 ? parts.pop().split(';').shift() : null;
}

Reminders

⚠️ When using this plugin, you must import in the first line of your application javascript entry file babel-polyfill: ⚠️

import "babel-polyfill";

To enable ES features in older browsers, you MUST include in the package.json

"browserslist": ["ie >= 9", "last 2 versions"]
// or
"browserslist": ["ie >= 10", "last 2 versions"]

Quick start

Installation

npm install util-request --save-dev