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 |

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