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 <br /> 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 <br /> 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.<br /> 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.<br />

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.<br /> To initialize the function we need 2 params, axios and config.<br />

| Property | Description | | --- | --- | | axios | axios instance | | config | Contains the desire plugins |

<br /> The function will sign the plugins into the injected axios instnace. <br />

Example

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

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

add

Add plugin at run time <br />

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. <br /> This is useful when you want to remove specific plugin at run time from the Redel instance. <br /> <br /> 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. <br /> This is useful when you want to remove all your plugins at once.<br />

Note: The axios instance will be saved.

Redel.ejectAll()

getSignedPlugins

Return Array of singed plugins name.<br />

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.<br /> Click here for more information

Redel.cancelGroupRequests('cancelGroupKey')

getCancelGroupHeader

sign request to cancel group.

Redel.getCancelGroupHeader()

You can find examples here