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)
})