Generalized API Manager for Javascript based applications

Api.js

import axios from 'axios';
import qs from 'qs';

// Customized Axios object for API calls
var Api = axios.create({
  // NOTE: Replace the API URL
  baseURL: 'http://api.example.com/',
  responseType: 'json',
  withCredentials: true
  // Add whatever you want to configure Axios here
});

// Allowed HTTP methods
var methods = ['get', 'post', 'put', 'delete', 'patch'];

// Add support for dynamically generated APIs
var apiHandler = function(url) {
  return {
    get: (target, name) => {
      var apiURL = url || '';
      var apiCall = (params) => {
        if (methods.indexOf(name) === -1) {
          return new Proxy({}, apiHandler(`${apiURL}/${name}/${String(params)}`));
        }
        return new Promise((resolve, reject) => {
          if (name === 'get' && params) {
            apiURL += `?${qs.stringify(params)}`;
          }

          Api[name](apiURL, params)
          .then(response => {
            // Resolve with response.data to only return data 
            // returned by API
            resolve(response.data)
          })
          .catch(error => {
            // TODO: Logout user if server returns 401 (unauthorized)
            // Or do other generalized error handling
            reject(error)
          });
        });
      }
      apiCall.__proto__ = new Proxy({}, apiHandler(`${apiURL}/${name}`));

      return apiCall;
    }
  }
}

// Expose APIs
export default new Proxy({}, apiHandler());

examples.js

import Api from './Api'

// GET http://api.example.com/users
Api.users.get().then(()=>())


// GET http://api.example.com/users?role[in][]=admin&role[in][]=editor
Api.users.get({
  role: {
    in: ['admin', 'editor']
  }
}).then(()=>())


// GET http://api.example.com/users/1
Api.users(1).get().then(response => {})


// GET http://api.example.com/users/1/banks/export
Api.users(1).banks.export.get().then(response => {})


// GET http://api.example.com/users/1/banks/10
Api.users(1).banks(10).get().then(response => {})


// GET http://api.example.com/users/export
Api.users.export.get().then(response => {})


// POST http://api.example.com/login
Api.login.post({
  username: 'hassanabbasi',
  password: '12345'
}).then(response => {})


// DELETE http://api.example.com/users/1
Api.users(1).delete().then(response => {})