axios-shortcut

v0.1.4

Published

2 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 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