vue adapter and typing for
@ace-fetch/core
在Vue 3.x
orVue 2.16.x + @vue/composition-api
中使用,
同时支持在Vue实例外调用,以及手动控制当前激活的fetch对象
yarn add @ace-fetch/vue
或者
npm i -S @ace-fetch/vue
import { createCatchErrorPlugin } from '@ace-fetch/core';
import { createFetch, defineRegistApi } from '@ace-fetch/vue';
const apiFetch = createFetch(axiosInstance)
// 注册全局插件
apiFetch.use(createCatchErrorPlugin({
handler: (error) => {
// 处理异常
return new Promise((resolve) => {});
},
}))
// 定义 regsitApi
const useUserApi = defineRegistApi('user',{
definition:{
getUsers: typedUrl<User[]>`get /users`
},
// 注册本地插件(插件注意执行先后顺序,本地插件优先于全局插件执行)
plugins:[
createCatchErrorPlugin({
handler: (error) => {
// 处理异常
return new Promise((resolve) => {});
},
})
]
})
import Vue from 'vue'
import { getActiveFetch, FetchVuePlugin } from '@ace-fetch/vue';
// Vue2 中必须注册插件
Vue.use(FetchVuePlugin);
// 注册 apiFetch 到 Vue
new Vue({
...
apiFetch,
}).$mount('#app')
// 组件内使用
{
created(){
const userApi = useUserApi();
userApi.getUsers()
}
}
// 在 @vue/composition-api 中使用 registApi
import { defineComponent } from '@vue/composition-api'
defineComponent({
setup(){
const userApi = useUserApi();
userApi.getUsers()
}
})
// 组件外调用
import fetch from '...'
const userApi = useUserApi(fetch); // 指定fetch对象
const userApi = useUserApi(getActiveFetch()); // 获取当前激活的fetch对象
import { createApp, defineComponent } from 'vue'
const app = createApp({
...
})
// 注册 apiFetch
app.use(apiFetch)
// 组件内使用
defineComponent({
setup(){
const userApi = useUserApi();
userApi.getUsers()
}
})