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
Example
Performing a basic usage
const Redel = const axios = const config = log: true Redel // .. axios
Performing usage with multiple plugins
const Redel = const axios = const config = log: true cancel: true pending: true Redel // .. axios
Performing usage with axios.create
const Redel = const axios = const axiosInstance = axios const config = log: true cancel: true pending: true Redel // .. axiosInstance
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:
- 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 = const axios = Redellet canceledReqeuests = 0 // We can check if the catch function triggered by the Redel cancel plugin// with the following condition `!!e.isCanceled`const catchFn = { if eisCanceled canceledReqeuests += 1 } const mount = async { const basicUrl = 'https://jsonplaceholder.typicode.com/todos' await Promiseall axios // canceled axios // canceled axios // canceled axios // resolved console // { canceledReqeuests: 3 }}
Usage - Cancel by group key
const Redel = const axios = Redelconst cancelGroupKey = 'customCancelGroupKey' const headers = Redelconst 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 = { if eisCanceled canceledReqeuests += 1 } const mount = { axios axios axios axios} // beforeDestroyed run the commend below to ensure that// all pending requests would be canceledRedel
Pending Plugin
Monitoring your pending requests.
Expose functionality to get your pending requests.
Examples
const Redel = const axios = Redel axios
A common usage of this functionality can be found in "beforeunload"
// if user has any pending request, display warning messagewindow
Log Plugin
Monitoring your requests by printing a very informative log about each request.
Examples
const Redel = const axios = const url = 'https://jsonplaceholder.typicode.com/todos/1' Redel axios
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 = const axios = Redel
add
Add plugin at run time
Example
const Redel = const axios = Redel // ...// ...// ... Redel console // ['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 = const axios = Redel //...//...//...console // ['log']Redelconsole // []
## 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
## getSignedPlugins
Return Array of singed plugins name.
Exmaple
const Redel = const axios = Redel console // ['log', 'cancel']
## getPendingRequests
Return Array of string, that each string contain the url of pending request.
Example
const Redel = const axios = Redel axios
## clearPendingRequests
Clear the pending request array.
Redel
## cancelGroupRequests
Cancel all requests that belong to the groupKey.
Click here for more information
Redel
## getCancelGroupHeader sign request to cancel group.
Redel
You can find examples here