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