Axios Shortcut

Shortcuts for Axios.

Compare to Axios

Axios	Axios Instance	Axios Shortcut
-	getUri([config])	-
request(config)	request(config)	-
get(url[, config])	get(url[, config])	GET(url[, params[, config]])
delete(url[, config])	delete(url[, config])	DELETE(url[, params[, config]])
head(url[, config])	head(url[, config])	HEAD(url[, params[, config]])
options(url[, config])	options(url[, config])	OPTIONS(url[, params[, config]])
post(url[, data[, config]])	post(url[, data[, config]])	POST(url[, data[, config]])
put(url[, data[, config]])	put(url[, data[, config]])	PUT(url[, data[, config]])
patch(url[, data[, config]])	patch(url[, data[, config]])	PATCH(url[, data[, config]])
-	-	DOWNLOAD(url[, fileName])

Install

NPM

npm i axios-shortcut

CDN + ESM

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <script type="importmap">
      {
        "imports": {
          "axios": "https://cdn.jsdelivr.net/npm/axios/dist/esm/axios.min.js",
          "axios-shortcut": "https://cdn.jsdelivr.net/npm/axios-shortcut@0.1/dist/axios-shortcut.mjs"
        }
      }
    </script>
    <script type="module">
      import AxiosShortcut from 'axios-shortcut'
      import axios from 'axios'

      const { GET, DELETE, HEAD, OPTIONS, POST, PUT, PATCH, DOWNLOAD } = AxiosShortcut(axios)
    </script>
  </body>
</html>

CDN + IIFE

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios-shortcut@0.1"></script>
    <script>
      const { GET, DELETE, HEAD, OPTIONS, POST, PUT, PATCH, DOWNLOAD } = AxiosShortcut(axios)
    </script>
  </body>
</html>

Usage

Create from Axios

import axios from 'axios'
import AxiosShortcut from 'axios-shortcut'

const axiosShortcut = AxiosShortcut(axios)

Create from Axios Instance

import request from '@/utils/request'
import AxiosShortcut from 'axios-shortcut'

const axiosShortcut = AxiosShortcut(request)

Register as Global Properties in Vue

for (const k in axiosShortcut) {
  // Vue 3
  app.config.globalProperties[`$${k}`] = axiosShortcut[k]

  // Vue 2
  Object.defineProperty(Vue.prototype, `$${k}`, {
    value: axiosShortcut[k]
  })
}

Upload

Request Header: Content-Type: multipart/form-data

(url: string, dataOrParams?: any, config?: AxiosRequestConfig<any>) => Promise<AxiosResponse<any>>

PUT.upload
POST.upload
PATCH.upload

Download

responseType: 'blob'

Note the default value of XMLHttpRequest.responseType is 'text'

And the default value of AxiosRequestConfig.responseType is 'json'

(url: string, dataOrParams?: any, config?: AxiosRequestConfig<any>) => Promise<AxiosResponse<any>>

GET.download
POST.download
PATCH.download
OPTIONS.download

Download Static Resources

Response Header: Content-Disposition: attachment

(url: string, fileName = '') => undefined

Remote Static Resources (URLs)

DOWNLOAD('https://xxx.jpg', 'xxx.jpg')

Local Static Resources (Object URLs)

// Plain Text
const text = 'Hello World'
const objectURL = URL.createObjectURL(new Blob([text], { type: 'text/plain' }))
DOWNLOAD(objectURL, 'xxx.txt')

// JSON
const json = { hello: 'world' }
const objectURL = URL.createObjectURL(new Blob([JSON.stringify(json)], { type: 'application/json' }))
DOWNLOAD(objectURL, 'xxx.json')

Changelog

Detailed changes for each release are documented in the release notes

cloydlau/axios-shortcut