Skip to content

Latest commit

 

History

History
418 lines (291 loc) · 8.94 KB

README.md

File metadata and controls

418 lines (291 loc) · 8.94 KB
Raw

Redel

npm version install size npm downloads license: MIT Build Status Coverage Status

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

Plugins

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

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

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