A middleware library for promise based axios for the browser and nodeJs
Using npm:
$ npm install redelUsing yarn:
$ yarn add redel- use
- add
- eject
- ejectAll
- getSignedPlugins
- getPendingRequests
- clearPendingRequests
- cancelGroupRequests
- getCancelGroupHeader
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 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:
- Single cancel
- 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)
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
})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",
}| 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 |
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 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']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()) // []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()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']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"]
})Clear the pending request array.
Redel.clearPendingRequests()Cancel all requests that belong to the groupKey.
Click here for more information
Redel.cancelGroupRequests('cancelGroupKey')sign request to cancel group.
Redel.getCancelGroupHeader()You can find examples here