@goi-pub/areq NPM

Avanced request (areq) (ZERO dependencies)

Standard "fetch" wrapper to easy request. This wraper helper based all funcionalities on functions. The idea is combine utilities on each promise.then to complete request on a semantic and easy way.

Project setup

$> npm i -D

Build for Develop

$> npm run build:dev

Build for Production

$> npm run build:prod

Project publish

# Always on master branch
$> git co master
# We must login
$> npm login
# And publish the new package (remember increase package.version)
$> npm publish --access public

Use cases

Init and config the core

import Cookies from 'js-cookie';
import get from 'lodash/get';
import set from 'lodash/set';
import factory from '@goi/areq';
import router from '@/router';
import store from '@/store';

const resolveNoAuth = () => {
  window.location.href = '/logout';
};

const session = Cookies.getJSON('session');
const token = get(session, 'token');
const core = {
  baseUrl: process.env.HOST,
  token,
  resolveNoAuth,
};

window.areq = factory(core);

Init and config the core (as Vuejs plugin)

import Cookies from 'js-cookie';
import get from 'lodash/get';
import set from 'lodash/set';
import factory from '@goi/areq';
import router from '@/router';
import store from '@/store';

const resolveNoAuth = () => {
  store.dispatch('auth/logout')
    .then(() => router.push({ name: 'login' }))
    .catch(() => {});
};

const session = Cookies.getJSON('session');
const token = get(session, 'token');
const core = {
  baseUrl: process.env.VUE_APP_API_HOST,
  token,
  resolveNoAuth,
};

export default {
  install: function (Vue) {
    const areq = factory(core);
    set(Vue, 'areq', areq);
    set(Vue, 'prototype.$areq', areq);
  },
};

Import all dependecies utilities

import {
  setJsonHeader,
  setAuthHeader,
  GET,
  PATCH,
  POST,
  DELETE,
  jsonData,
  setBody,
  setRequest,
  fileData,
  enqueue,
  handleErrorCatch,
} from '@goi/areq';

Auth login (As Vue Plugin)

  const resolve = ({ data, config }) => {
    const token = get(data, 'access_token', null);
    set(config, 'core.token', token);
    const session = get(data, 'session', {
      email: username,
      name: 'No name',
    });
    return { ...session, token };
  };

  return Vue.areq()
    .then(setJsonHeader)
    .then(setBody({ username, password, client_id, client_secret }))
    .then(POST('endpoint/oauth'))
    .then(jsonData(resolve))
    .catch(error => { throw error; });

GET sample (as Vue Plugin)

  return Vue.areq()
    .then(setJsonHeader)
    .then(setAuthHeader)
    .then(GET('cars'))
    .then(jsonData())
    .catch(handleErrorCatch);

PATCH sample (as Vue Plugin)

  return Vue.areq()
    .then(setJsonHeader)
    .then(setAuthHeader)
    .then(setBody({ ...aLotOfContent }))
    .then(PATCH(`cars/${reference}`))
    .then(jsonData())
    .catch(handleErrorCatch);

POST form data (as Vue Plugin)

  return Vue.areq()
    .then(setJsonHeader)
    .then(setAuthHeader)
    .then(setBody(formdata))
    .then(POST('cars'))
    .then(jsonData())
    .catch(handleErrorCatch);

GET binary files (as Vue Plugin)

  return Vue.areq()
    .then(setJsonHeader)
    .then(setAuthHeader)
    .then(setRequest({ responseType: 'arraybuffer' }))
    .then(GET('cars/export'))
    .then(fileData())
    .catch(handleErrorCatch);

DELETE sample (as Vue Plugin)

  return Vue.areq()
    .then(setJsonHeader)
    .then(setAuthHeader)
    .then(DELETE(`cars/${id}`))
    .then(jsonData())
    .catch(handleErrorCatch);