Package Exports

demi-axios
demi-axios/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (demi-axios) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

logo of demi-axios repository

English | 简体中文

demi-axios

🦾 Based on vue-demi, useAxios written by compositionApi supports vue2/vue3.

Installation

# npm
npm i demi-axios

# yarn
yarn add demi-axios

# pnpm
pnpm i demi-axios

Usage Example

init

// init 
import { create } from 'demi-axios'
import type { AxiosInstance } from 'axios'

const axios: AxiosInstance = create({/* axiosOptions */})

// axios.interceptors.response.use((response) => {
//   ...
//   return response
// }, (error) => {
//   return Promise.reject(error)
// })

Usage

// Usage
// use***(initialData, url, Formatter(responseData, currentData))

import { useGet } from 'demi-axios'

const { data, loading, task, error, response } = useGet(
  {}, 
  'https://jsonplaceholder.typicode.com/posts/1',
  (responseData, currentData)=>{
    // process
    return responseData
  }
)
// data : Ref<T> Return value
// loading : Ref<boolean>
// task(playload, config)
// error : Ref<T>
// response : Ref<T>

// example 1
task({params: 'demi'}).then((res) => {
  console.log(res)
})

// example 2
await task()
console.log(data.value)
consoe.log(response.value)

API

Fetch json

useGet
useHead
useDelete
useOptions

Fetch Blob

useGetBlob
useHeadBlob
useDeleteBlob
useOptionsBlob

Modify application/json

usePost
usePut
usePatch

Modify application/x-www-form-urlencoded

usePostEncoded
usePutEncoded
usePatchEncoded

Modify multipart/form-data

usePostMultipart usePutMultipart usePatchMultipart

FAQ

1. data.value is undefined

The default data format returned by the server is {data:any}. If you are {}, you can do a layer of data processing in the interceptor.

axios.interceptors.response.use((response) => {
  // ...
  return { data:response }
}, (error) => {
  return Promise.reject(error)
})