axios-series

A serializer for axios

Documentation • Change Log

Read this in other languages: English | 简体中文

Installing

axios-series comes with the latest version of axios, so you can install it without the axios

# use pnpm
$ pnpm install axios-series

# use npm
$ npm install axios-series --save

# use yarn
$ yarn add axios-series

Usage

General use

// {app_root}/src/plugins/axios.js
import { getCookie, setCookie } from 'js-cool'
import AxiosSeries from 'axios-series'

/**
 * Set the request header
 *
 * @param {object} instance AxiosInstance
 */
function setHeaders(instance) {
  instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
}
/**
 * Request Interceptor
 *
 * @param {object} config AxiosRequestConfig
 * @param {object} options request options AxiosSeriesRequestOptions
 * @returns AxiosRequestConfig
 */
function onRequest(config, options = {}) {
  // some codes
  return config
}
/**
 * Execute on request error
 *
 * @param {object} err Error
 */
function onRequestError(err) {
  console.error(err)
}
/**
 * Response Interceptor
 *
 * @param {object} res AxiosResponse<any>
 * @param {object} options request options AxiosSeriesRequestOptions
 * @returns Promise<unknown>
 */
function onResponse(res, options = {}) {
  if (res.data.success) return res.data
  return Promise.reject(res.data)
}
/**
 * Execute in response error
 *
 * @param {object} err Error
 */
function onResponseError(err) {
  console.error(err)
}
/**
 * Execute on request error & response error
 *
 * @param {object} err Error
 */
function onError(err) {
  console.error(err)
}
/**
 * Request Cancelled
 *
 * @param {object} err Error
 */
function onCancel(err) {
  console.error(err.message)
}

// Instantiation
const axiosSeries = new AxiosSeries({
  unique: true, // Whether to cancel the previous similar requests, default: false
  setHeaders, // function for setting request headers
  onRequest, // Request Interceptor
  onRequestError, // Execute on request error
  onResponse, // Response Interceptor
  onResponseError, // Execute on response error
  onError, // Execute on request error & response error
  onCancel // Callback when request is cancelled
})

export default options => {
  // Here set the unique and orderly priority higher than the instantiation configuration
  options.unique = options.unique ?? false
  // Here the unique has a higher priority
  return axiosSeries.create(options)
}

Using with vue2.0

Sometimes we need to use this (vue instance) inside onRequest or onResponse, we can use it like this

import AxiosSeries from 'axios-series'

let axiosSeries = null
// Request Interceptor
function onRequest(config, options = {}) {
  // this => vueInstance
  return config
}
// Response Interceptor
function onResponse(res, options = {}) {
  // hide loading
  if (this instanceof Vue) {
    this.$loader.hide()
  }
  if (res.data.success) return res.data
  return Promise.reject(res.data)
}

export default options => {
  // Only need to initialize once
  if (!axiosSeries)
    axiosSeries = new AxiosSeries({
      onRequest: onRequest.bind(this),
      onResponse: onResponse.bind(this)
    })

  // show loading
  if (this instanceof Vue) {
    this.$loader.show()
  }
  return axiosSeries.create(options)
}

Using unpkg CDN

<script src="https://unpkg.com/[email protected]/dist/index.global.prod.js"></script>

Support & Issues

Please open an issue here.

License

MIT