Redel

A middleware library for promise based axios for the browser and nodeJs

Installing

Using npm:

$ npm install redel

Using yarn:

$ yarn add redel

Redel API

• use
• add
• eject
• ejectAll
• getSignedPlugins
• getPendingRequests
• clearPendingRequests
• cancelGroupRequests
• getCancelGroupHeader

Plugins

• Cancel
• Log
• Pending

Example

Performing a basic usage

const Redel = require('redel')
const axios = require('axios')

const config = { log: true }
Redel.use(axios, config)

// ..

axios.get('https://jsonplaceholder.typicode.com/todos')

Performing usage with multiple plugins

const Redel = require('redel')
const axios = require('axios')

const config = { log: true, cancel: true, pending: true }
Redel.use(axios, config)

// ..

axios.get('https://jsonplaceholder.typicode.com/todos')

Performing usage with axios.create

const Redel = require('redel')
const axios = require('axios')
const axiosInstance = axios.create()

const config = { log: true, cancel: true, pending: true }
Redel.use(axiosInstance, config)

// ..

axiosInstance.get('https://jsonplaceholder.typicode.com/todos')

Cancel Plugin

Cancel plugin is a plugin that wrap your requests before firing them to the server with axios cancellation functionality.

The cancel plugin work with 2 different functionality:

1. Single cancel
2. Cancel by group key

• Single
  Cancel request that still didn't return from the server when a new request with the same method and pathname gonna be fired to the server.

• Cancel by group key
  Cancel all requests with the unique group key

Usage - Single

const Redel = require('redel')
const axios = require('axios')

Redel.use(axios, { cancel: true })
let canceledReqeuests = 0

// We can check if the catch function triggered by the Redel cancel plugin
// with the following condition `!!e.isCanceled`
const catchFn = e => {
  if (e.isCanceled) {
    canceledReqeuests += 1
  }
}

const mount = async () => {
  const basicUrl = 'https://jsonplaceholder.typicode.com/todos'
  await Promise.all([
    axios.get(`${basicUrl}?group=3`).catch(catchFn), // canceled
    axios.get(`${basicUrl}?group=124`).catch(catchFn), // canceled
    axios.get(`${basicUrl}?group=1911`).catch(catchFn), // canceled
    axios.get(`${basicUrl}?group=00001`).catch(catchFn) // resolved
  ])
  console.log({ canceledReqeuests }) // { canceledReqeuests: 3 }
}

mount()

Usage - Cancel by group key

const Redel = require('redel')
const axios = require('axios')

Redel.use(axios, { cancel: true })
const cancelGroupKey = 'customCancelGroupKey'

const headers = Redel.getCancelGroupHeader(cancelGroupKey)
const basicUrl = 'https://jsonplaceholder.typicode.com/todos'

let canceledReqeuests = 0

// We can check if the catch function triggered by the Redel cancel plugin
// with the following condition `!!e.isCanceled`
const catchFn = e => {
  if (e.isCanceled) {
    canceledReqeuests += 1
  }
}

const mount = () => {
  axios.get(`${basicUrl}/1`, { headers }).catch(catchFn),
  axios.get(`${basicUrl}/2`, { headers }).catch(catchFn),
  axios.get(`${basicUrl}/3`, { headers }).catch(catchFn),
  axios.get(`${basicUrl}/4`, { headers }).catch(catchFn)
}

mount()

// beforeDestroyed run the commend below to ensure that
// all pending requests would be canceled
Redel.cancelGroupRequests(cancelGroupKey)

Pending Plugin

Monitoring your pending requests.
Expose functionality to get your pending requests.

Examples

const Redel = require('redel')
const axios = require('axios')

Redel.use(axios, { pending: true })

axios.get('https://jsonplaceholder.typicode.com/todos/1')
setTimeout(() => {
    console.log(Redel.getPendingRequests()) // ["/todos/1"]
})

A common usage of this functionality can be found in "beforeunload"

// if user has any pending request, display warning message
window.addEventListener("beforeunload", function (e) {
 if (Redel.getPendingRequests().length) {
   // there are pending requests
   // display a warning message
 }
 // unload the page
})

Log Plugin

Monitoring your requests by printing a very informative log about each request.

Examples

const Redel = require('redel')
const axios = require('axios')

const url = 'https://jsonplaceholder.typicode.com/todos/1'

Redel.use(axios, { log: true })

axios.get(url)

The above will print the js object below

{
   isCompletedWithoutError: true,
   maxContentLength: -1,
   method: "get",
   timeout: 0,
   proxy: undefined,
   requestData: {query: {}, data: {}, params: {}},
   requestHeaders: {
       common: {Accept: "application/json", "text/plain": "*/*"},
       delete: {},
       get: {},
       head: {},
       patch: {"Content-Type": "application/x-www-form-urlencoded"},
       post: {"Content-Type": "application/x-www-form-urlencoded"},
       put: {"Content-Type": "application/x-www-form-urlencoded"},
   },
   responseData: {userId: 1, id: 1, title: "delectus aut autem", completed: false},
   endTime: 1571698420250,
   startTime: 1571698420167,
   totalTime: "83ms",
   url: "https://jsonplaceholder.typicode.com/todos/1",
}

Table of content

Property	Type	Description
isCompletedWithoutError	Boolean	The request done with error or not
maxContentLength	Number	Request max content length
method	String	Request method
timeout	number	Request time out
proxy	object	Request proxy
requestData	Object	Object that hold the request data (data, query, params)
requestHeaders	Object	Request headers
responseData	Object	Response data
startTime	Number (timestamp)	Request start time
endTime	Number (timestamp)	Request end time
totalTime	String	Request total time
url	String	Request url

Use

Work as Redel init function.
To initialize the function we need 2 params, axios and config.

Property	Description
axios	axios instance
config	Contains the desire plugins

The function will sign the plugins into the injected axios instnace.

Example

const Redel = require('redel')
const axios = require('axios')

Redel.use(axios, { log: true })

add

Add plugin at run time

Example

const Redel = require('redel')
const axios = require('axios')

Redel.use(axios, { log: true })

// ...
// ...
// ...

Redel.add('cancel')

console.log(Redel.getSignedPlugins()) // ['log', 'cancel']

eject

Remove plugin from Redel.
This is useful when you want to remove specific plugin at run time from the Redel instance.

Example

const Redel = require('redel')
const axios = require('axios')

Redel.use(axios, { log: true })

//...
//...
//...
console.log(Redel.getSignedPlugins()) // ['log']
Redel.eject('log')
console.log(Redel.getSignedPlugins()) // []

ejectAll

Reset the Redel plugins.
This is useful when you want to remove all your plugins at once.

Note: The axios instance will be saved.

Redel.ejectAll()

getSignedPlugins

Return Array of singed plugins name.

Exmaple

const Redel = require('redel')
const axios = require('axios')

Redel.use(axios, { log: true, cancel: true })

console.log(Redel.getSignedPlugins()) // ['log', 'cancel']

getPendingRequests

Return Array of string, that each string contain the url of pending request.

Example

const Redel = require('redel')
const axios = require('axios')

Redel.use(axios, { pending: true })

axios.get('https://jsonplaceholder.typicode.com/todos/1')
setTimeout(() => {
    console.log(Redel.getPendingRequests()) // ["/todos/1"]
})

clearPendingRequests

Clear the pending request array.

Redel.clearPendingRequests()

cancelGroupRequests

Cancel all requests that belong to the groupKey.
Click here for more information

Redel.cancelGroupRequests('cancelGroupKey')

getCancelGroupHeader

sign request to cancel group.

Redel.getCancelGroupHeader()

You can find examples here