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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent