@ace-fetch/vue

@ace-fetch/vue

vue adapter and typing for @ace-fetch/core 在 Vue 3.x or Vue 2.16.x + @vue/composition-api 中使用，
同时支持在Vue实例外调用，以及手动控制当前激活的fetch对象

安装

yarn add @ace-fetch/vue
或者
npm i -S @ace-fetch/vue

使用方法

Define Regist Api

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) => {});
      },
    })
  ]
})

Vue2

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对象

Vue3

import { createApp, defineComponent } from 'vue'

const app = createApp({
  ...
})
// 注册 apiFetch
app.use(apiFetch)

// 组件内使用
defineComponent({
  setup(){
    const userApi = useUserApi();
    userApi.getUsers()
  }
})