axios-shortcut

v0.1.3

Published

5 months ago

Shortcuts for [Axios](https://github.com/axios/axios).

Downloads

0High
0Medium
0Low

cloydlau

axios download upload

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/[email protected]/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/[email protected]"></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.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