Axios Plux

Simply axios with some extra cool features

Basic usage

import axiosPlux from 'axios-plux'

// You can still do basically normal axios stuff

axiosPlux.get(url, config)

axiosPlux.post(url, data, config)

// Instantiation
const wikipedia = axiosPlux.create(config)

// Error handling
wikipedia.onRequestError((err) => {});

// Reusable request api
const wikipediaApi = wikipedia.api

wikipediaApi.fetchArticle(1)

Special Features

• API functional routes
• Request caching/memoizing
• Url path placeholder
• Data and config consolidation (just for syntax)
• Extras: shorthands, setup, and helpers

Routes definition

Route can be defined globally, or scoped to and axiosPlux instance and can be easily reused throughout your code

import axiosPlux from 'axios-plux'

// Global routes
axiosPlux.routes = {
  fetchThirdPartyData: 'http://thirdpartyapi.com'
}

// Scoped routes
const axiosPluxInstance = axiosPlux.create({
  baseUrl: 'http://localhost:8080/api/v1/',
  routes: {
    fetchTwelveUsers: {
      path: '/users',
      params: { paginationSize: 12 },
      method: 'GET'
    }
  }
})

Note: Scoped instances will have access to the global route

A route is an object that can be defined with 4 properties

• path: the url of the route, relative or full
• params: set a route scope url query params
• method: HTTP method for the request, defaults to "get"
• cache: enable / disable request caching

or a string as the url/path, method as GET

API functional routes

API functional routes is extremely useful for portable and reusabality, and promotes consistency with url changes are a way to both simplify request and reduce url string typos. API route functions can only be created at a scoped instance i.e. using axiosPlux.create(config)

import axiosPlux from 'axios-plux'

const axiosPluxInstance = axiosPlux.create({
  routes: {
    fetchTwelveUsers: {
      path: 'http://localhost:8080/api/v1/users',
      params: {paginationSize: 12}
    },
    createNewUser: {
      method: 'post',
      path: 'http://localhost:8080/api/v1/users'
    }
  }
})

Now, fetchTwelveUsers and createNewUser methods will now be availble in the instance .api property, and can be used as demonstrated below

const myApi = axiosPluxInstance.api

// get request
await myApi.fetchTwelveUsers()

// post request
await myApi.createNewUser(data)

Request caching/memoizing

This can help reduce multiple identical request from hitting and straining the server, and also greatly increase response time.

The cache configuration can be added to the request/instance configuration object with 3 possible values types.

1. Boolean: true simply enable caching and false disable caching.
2. Number: enables caching with a time limit (ms).
3. Function: will cache request, and also send a new request, then call the function with the update response.

Url path placeholder

For a descriptive url with less url string manipulation/concatenation, you can add simple descriptive placeholders to url path with a colon preceeding the placeholder name e.g. http://domain.tld/path/:placeholder/action/:id

Example

import axiosPlux from 'axiosPlux'

axiosPlux.delete('http://localhost:8080/users/:userId', {
  vars: {userId: 1}
})

API route function example

import axiosPlux from 'axiosPlux'

const axiosPluxInstance = axiosPlux.create({
  routes: {
    fetchUser: 'http://localhost:8080/api/v1/users/:userId/store/:storeId'
  }
})

const { api } = axiosPlux;

api.fetchUser({
  vars: {
    userId: 1,
    storeId: 2
  }
})

or

api.fetchUser(1, 2)

Data and config consolidation (just for syntax)

The request config can be added to request data parameter in request methods like POST, by adding a $ sign before the config property this distiguises the data from the configs

Difference

import axiosPlux from 'axios-plux'

/* Consolidated */

axiosPlux.post('/users/:role', {
  firstName: 'Adam',
  lastName: 'God',
  location: 'eden',

  $headers: {
    authorization: 'whatisknowledge'
  }

  $vars: {
    role: 'admin',
  }
})

/* Seperated */

axiosPlux.post(
  '/users/:role',
  {
    firstName: 'Adam',
    lastName: 'God',
    location: 'eden',
  },
  {
    headers: {
      authorization: 'whatisknowledge'
    }

    vars: {
      role: 'admin',
    }
  }
)

Extras: shorthands and helpers

URL placeholders in functional routes

You can further simplify fuctional route request with placeholder by...

• Passing the placeholders as arguments
• Using an array instead of an object in the config.vars

Example

  import axiosPlux from 'axios-plux'

  const myStore = axiosPlux.create({
    addRouteMethods: true,
    baseURL: 'https://api.my-store.com/',
    routes: {
      fetchOrderItem: 'orders/:id/items/itemId'
    },
  })

  /* Using arguments */

  await myStore.api.fetchOrderItem(1, 2);

  /* Using config.vars as an array */

  await myStore.api.fetchOrderItem({
    vars: [1, 2]
  })

  /* Using config.vars as an object */

  await myStore.api.fetchOrderItem({
    vars: {
      id: 1,
      itemId: 2
    }
  })

Interceptors helpers

There some helper methods only available on axios plux instance

  import axiosPlux from "axios-plux"

  const axiosPluxInstance = axiosPlux.create({})

  axiosPluxInstance.onRequest()
  axiosPluxInstance.onRequestError()
  axiosPluxInstance.onResponse()
  axiosPluxInstance.onResponseError()

Access axios instance

import axiosPlux from "axios-plux"

const { axios } = axiosPlux

const axiosPluxInstance = axiosPlux.create({})

const { axios } = axiosPluxInstance

The end