axios-utils

Easy intercepting of axios resources (instances).

Table of contents

• Features
• Installing
• Example
• API

Features

• Create axios instances (resources) with default request config and/or custom request config
• Add error interceptors for specific status codes and/or based on regexp's

Installing

Using yarn:

yarn add @acato/axios-utils

Using npm:

npm i @acato/axios-utils

Example

Creating a (axios) resource:

import { createResource } from '@acato/axios-utils'

export const myResource = createResource({ baseUrl: 'https://myhost.com/api' })

Define interceptors:

import { applyInterceptors, addHandler } from '@acato/axios-utils'

// Authorization config:
const requestConfig = (config) => {
  config.headers['Authorization'] = `Bearer ${getTokenFromSomewhere()}`
  return config
}
// Request interceptor:
export const intercept = applyInterceptors({
  request: requestConfig
})
// Request with extra config (makes use of re-usable 'requestConfig'):
export const intercept = applyInterceptors({
   request: (config) => {
    config.headers['x-header'] = 'x-value'
    return requestConfig(config)
  },
})

// Response interceptor:
export const intercept = applyInterceptors({
   response: res => res // or do something useful instead
})

// Error handlers:
const responseErrorConfig = addHandler(
  {
    match: 502, // matches 502 errors (exact match)
    handler: (error, axiosInstance) => // Promise.reject or do something else
  },
  {
    match: /40/, // matches all 40* errors (regexp)
    handler: (error, axiosInstance) => // Promise.reject or do something else
  }
)

export const intercept = applyInterceptors({
  error: responseErrorConfig
})

Our interceptor function is ready and we can intercept axios instances easily:

import { createResource } from '@acato/axios-utils'
import { intercept } from './my-interceptors'

export const myResource = intercept(createResource({ baseURL: 'https://...' }))

API

Interceptors can be connected to your resources by passing relevant interceptor config to applyInterceptors.

applyInterceptors(interceptorConfig)

Interceptor config

{
 // Not required
 request: config => {
  config.headers['Authorization'] = `Bearer ${getTokenFromSomewhere()}`
  return config
 },

 // Not required
 response: res => {
   // do something with response before sending it
 },

 // Not required
 error: addHandler(
    {
      match: /502/,
      handler: (err, axiosInstance) => ...
    },
    {
      match: /40/,
      handler: (err, axiosInstance) => ...
    }
  )
Note that the order of the handlers matters, because the first match will be used to handle the specific error.
So to be sure your handler will be executed, add handlers from specific to more generic, like this:
  addErrorHandler({
        match: 401,
        handler:...
    },
    {
        match: /40/,
        handler: ...
    }
  )

 This errorhandler will first match a 401 error, then all other 40* errors.

}

Return value

applyInterceptors returns a function which accepts an axios resource (instance) as the only argument.

  export const applyInterceptors =
  ({ request, response, error }) =>
  (axiosResource) => {

    // attach interceptors here to the axiosResource:
  ...
  }

Usage

Create a re-usable intercept function:

import { createResource } from '@acato/axios-utils'

export const intercept = applyInterceptors({
  request: ...,
  response: ...,
  error: ...
})

Apply the intercept function on an axios resource:

import { createResource } from '@acato/axios-utils'
import { intercept } from 'my-interceptor'

export const myResource = intercept(
  createResource({
    baseURL: `${API_URL}/api`
  })
)

Now every fetch call with any axios resource 'wrapped' with the intercept function, will trigger our interceptor handlers.