Axios Shortcut 
Shortcuts for [Axios](https://github.com/axios/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-shortcutCDN + 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 AxiosShortcut from 'axios-shortcut'
import axios from 'axios'
const axiosShortcut = AxiosShortcut(axios)Create from Axios Instance
import AxiosShortcut from 'axios-shortcut'
import request from '@/utils/request'
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.uploadPOST.uploadPATCH.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.downloadPOST.downloadPATCH.downloadOPTIONS.download
Download Static Resources
Response Header: Content-Disposition: attachment
(url: string, fileName = '') => undefinedRemote 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