### Installing @ace-fetch/core

Source: https://github.com/acehubert/ace-fetch/blob/master/packages/core/README.md

Commands to install the @ace-fetch/core package using either yarn or npm package managers.

```bash
yarn add @ace-fetch/core
或者
npm i -S @ace-fetch/core
```

--------------------------------

### Installing @ace-fetch/graphql-vue (Bash)

Source: https://github.com/acehubert/ace-fetch/blob/master/packages/graphql-vue/README.md

Provides the command-line instructions to install the @ace-fetch/graphql-vue package using either yarn or npm.

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

--------------------------------

### Install @ace-fetch/uni-app

Source: https://github.com/acehubert/ace-fetch/blob/master/packages/uni-app/README.md

Commands to install the @ace-fetch/uni-app package using yarn or npm.

```Bash
yarn add @ace-fetch/uni-app
npm i -S @ace-fetch/uni-app
```

--------------------------------

### Installing @ace-fetch/vue

Source: https://github.com/acehubert/ace-fetch/blob/master/packages/vue/README.md

Instructions for adding the @ace-fetch/vue package to your project using yarn or npm.

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

--------------------------------

### Install @ace-fetch/graphql

Source: https://github.com/acehubert/ace-fetch/blob/master/packages/graphql/README.md

Instructions for installing the @ace-fetch/graphql package using either yarn or npm package managers.

```bash
yarn add @ace-fetch/graphql
或者
npm i -S @ace-fetch/graphql
```

--------------------------------

### Install @ace-fetch/axios Package (Bash)

Source: https://github.com/acehubert/ace-fetch/blob/master/packages/axios/README.md

Provides the command-line instructions to install the @ace-fetch/axios package using either Yarn or npm, which is the first step to using the library.

```bash
yarn add @ace-fetch/axios
或者
npm i -S @ace-fetch/axios
```

--------------------------------

### Install @ace-fetch/react Package

Source: https://github.com/acehubert/ace-fetch/blob/master/packages/react/README.md

Install the `@ace-fetch/react` package using either yarn or npm.

```bash
yarn add @ace-fetch/react
或者
npm i -S @ace-fetch/react
```

--------------------------------

### Installing @ace-fetch/dify-compatible-plugin with Yarn or npm

Source: https://github.com/acehubert/ace-fetch/blob/master/packages/dify-compatible-plugin/README.md

Instructions on how to add the @ace-fetch/dify-compatible-plugin package to your project using either Yarn or npm package managers.

```bash
yarn add @ace-fetch/dify-compatible-plugin
或者
npm i -S @ace-fetch/dify-compatible-plugin
```

--------------------------------

### Using @ace-fetch/core with Axios

Source: https://github.com/acehubert/ace-fetch/blob/master/packages/core/README.md

Demonstrates the core usage of @ace-fetch/core, including creating an Axios instance, registering APIs with typed URLs, applying a catch error plugin, and making various types of API calls (GET with params, POST with body).

```javascript
// 使用 axios 作为示例
import axios from 'axios';
import { regisApi, createCatchErrorPlugin } from '@ace-fetch/core';

// 创建 asiox 实例
const axiosInstance = axios.create({
  timeout: 5000
})

const prefix = 'http://api/base_url/'

interface User{
  id: number;
  firstName: string;
  lastName: string;
  city: string;
}

// 定义 apis
let userApi = registApi(axiosInstance, {
  // 定义 api
  getUsers: 'get /users',
  // 或使用 typedUrl 函数在 typescript 中明确类型定义
  getUsers: typedUrl<User[]>`get /users`,
  // get 可以省略
  // 通过字符串获取 params 中的变量拼接 url
  getUser: typedUrl<User, { id: string | number }>`/user/${'id'}`, 
  // 或者通过函数拼接url
  getUser: typedUrl<User, { id: string | number }>`/user/${(params)=> params.id}`, 
  // typedUrl 可以是函数传 RequestConfig 作为当前请求的定义
  addUser: typedUrl<User, any, Partial<Omit<User, 'id'>>> ({
    timeout: 10000
  })`post /user`,
}, prefix);

// 应用插件
userApi = createCatchErrorPlugin({
  handler: (error) => {
    // 处理异常
    return new Promise((resolve) => {});
  },
}) ({
  registApis: userApi
})

// 调用方法
userApi.getUsers().then(({data})=>{ ... });
// params 参数
userApi.getUsers({ params: {id:1} }).then(({data})=>{  ... });
// body 参数
userApi.addUser({ data: { firstName:'San', lastName: 'Zhang', city: 'BeiJing' }}).then(({data})=>{  ... });

```

--------------------------------

### Using @ace-fetch/vue in Vue 3 (JavaScript)

Source: https://github.com/acehubert/ace-fetch/blob/master/packages/vue/README.md

Illustrates how to integrate @ace-fetch/vue into a Vue 3 application by using the fetch instance with `app.use()` and how to use the defined API within a component's setup function.

```javascript
import { createApp, defineComponent } from 'vue'

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

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

--------------------------------

### Using @ace-fetch/graphql-vue in Vue 3 (JavaScript)

Source: https://github.com/acehubert/ace-fetch/blob/master/packages/graphql-vue/README.md

Shows how to integrate and use @ace-fetch/graphql-vue within a Vue 3 application, including registering the fetch instance with the app instance and accessing the defined API within a component's setup function.

```javascript
import { createApp, defineComponent } from 'vue'

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


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

--------------------------------

### Using @ace-fetch/graphql with Apollo Client

Source: https://github.com/acehubert/ace-fetch/blob/master/packages/graphql/README.md

Demonstrates how to register GraphQL APIs using `registGraphql` with an Apollo Client instance. It shows defining queries and mutations using `graphql-tag` and `TypedQueryDocumentNode` and provides examples of calling the registered APIs.

```javascript
import { regisApi, TypedQueryDocumentNode } from '@ace-fetch/graphql';
import { ApolloClient } from '@apollo/client';
import { gql } from 'graphql-tag';

interface User{
  id: number;
  firstName: string;
  lastName: string;
  city: string;
}

const client = new ApolloClient({
  uri: 'http://localhost:3000/graphql',
  cache: new InMemoryCache()
});

// 定义 apis
const userApi = registGraphql(client, {
  // 定义 api
  getUsers: gql`
    query getUsers($page: Int, $size: Int){
      users(page: $page, size: $size){
        id
        firstName
        lastName
        city
      }
    }
  ` as TypedQueryDocumentNode<{users: User[]},{page?: number, size?: number}>,
  getUser: gql`
    query getUser($id: Int){
      user(id: $id){
        id
        firstName
        lastName
        city
      }
    }
  ` as TypedQueryDocumentNode<{user: User}, {id?: number}>,
  // typedUrl 可以是函数传 RequestConfig 作为当前请求的定义
  addUser: gql`
    mutation addUser($firstName: String!, $lastName: String!, $city: String!){
      addUser(firstName: $firstName, lastName: $lastName, city: $city){
        id
        firstName
        lastName
        city
      }
    }
  ` as TypedQueryDocumentNode<User, {firstName: string, lastName: string, city: string}>
});

// 调用
userApi.getUsers().then(({users})=>{ ... });
// query
userApi.getUsers({ variables: {id:1} }).then(({user})=>{  ... });
// mutation
userApi.addUser({ variables: { firstName:'San', lastName: 'Zhang', city: 'BeiJing' }}).then(({user})=>{  ... });
```

--------------------------------

### Using @ace-fetch/graphql-vue in Vue 2 (JavaScript)

Source: https://github.com/acehubert/ace-fetch/blob/master/packages/graphql-vue/README.md

Illustrates the integration and usage patterns for @ace-fetch/graphql-vue within a Vue 2 application, covering plugin registration, attaching the fetch instance to the Vue root, and accessing the API from component methods, Composition API setup, and outside components.

```javascript
import Vue from 'vue'
import { getActiveFetch, FetchVuePlugin } from '@ace-fetch/graphql-vue';

// Vue2 中必须注册插件
Vue.use(FetchVuePlugin);

// 注册 graphqlFetch 到 Vue
new Vue({
  ...
  graphqlFetch,
}).$mount('#app')

// 组件内使用
{
  created(){
    const userApi = useUserApi();
    userApi.getUsers().then(({users})=>{ ... });
  }
}
// 在 @vue/composition-api 中使用
import { defineComponent } from '@vue/composition-api'

defineComponent({
  setup(){
    const userApi = useUserApi();
    userApi.getUsers().then(({users})=>{ ... });
  }
})


// 组件外调用
import fetch from '...'
const userApi = useUserApi(fetch); // 指定fetch对象
const userApi = useUserApi(getActiveFetch()); // 获取当前激活的fetch对象
```

--------------------------------

### Registering Plugins with Ace Fetch

Source: https://github.com/acehubert/ace-fetch/blob/master/packages/uni-app/README.md

Demonstrates how to create a fetch instance with the Uni-app client and register various plugins (catch error, loading, retry) globally using `use` and locally using `defineRegistApi`. It also shows basic usage of the defined API and the client.

```JavaScript
import { createApp } from 'vue';
import { createCatchErrorPlugin, createLoadingPlugin, createRetryPlugin } from '@ace-fetch/core';
import { createFetch, defineRegistApi } from '@ace-fetch/vue';
import { UinAppClient } from '@ace-fetch/uni-app';

const client = new UinAppClient({
  withCredentials: true,
});

const apiFetch = createFetch(client);

apiFetch.use(
  createCatchErrorPlugin({
    // 当接口通过body返回异常消息，可通过此方法判断
    // 注意：如果有全局自定义 interceptors，在 request 中不能改变返回的类型，data 参数为 AxiosResponse data 参数
    serializerData(data){
      if(data.success){
        return data.data;
      }else{
        return Promise.reject(new Error(data.message));
      }
    },
    handler: (error)=>{
      // 处理异常

      // 阻止接口继续执行
      return new Promise((resolve)=>{});
    }
  })
);

apiFetch.use(
  createLoadingPlugin({
    delay: 260, // 延迟显示，如果接口在设置时间内返回则不调用handler方法
    handler: () => {
      // 显示loading的处理方法
      // 显示 loading
      return () => {
        // 隐藏 loading
      };
    },
  })
);

apiFetch.use(
  createRetryPlugin({
     maxCount: 3, // 重试次数
     delay: true, // 重试延迟
     validateError: (err)=> true // 触发retry的条件
  })
);

// 定义 registApi
const useUserApi = defineRegistApi('user', {
  definition: {
    getUser: 'get /user',
  },
  plugins:[
    createCatchErrorPlugin({
      // ...
    }),
    createLoadingPlugin({
      // ...
    }),
    createRetryPlugin({
      // ...
    })
  ]
});

const useApi = useUserApi();

// 使用registApi
useApi.getUser({
  // 全局 loading 生效
  loading: true,
});

// fetch.client 指向是 UinAppClient
apiFetch.client.get('/user', {
  // 全局 loading 不生效
  loading: true,
});


// 在Vue中使用请查看"@ace-fetch/vue"文档
const app = createApp({});
app.use(apiFetch);
app.mount('#app');
```

--------------------------------

### Apply Axios Interceptor Plugins (@ace-fetch/axios)

Source: https://github.com/acehubert/ace-fetch/blob/master/packages/axios/README.md

Demonstrates how to import and apply the applyLoading, applyRetry, and applyCatchError plugins to an Axios instance. It shows basic configuration options for each plugin and how to enable them on individual requests.

```javascript
import axios from 'axios'
import { applyLoading, applyRetry, applyCatchError } from '@ace-fetch/axios'

const axiosInstance = axios.create({})

// loading
applyLoading(axiosInstance,{
  delay: 260, // 延迟显示，如果接口在设置时间内返回则不调用handler方法
  handler: ()=>{
    // 显示 loading
    return ()=>{
      // 隐藏 loading
    }
  }
})

axiosInstance.request({
  loading: true // 是否显示loading, 或自定义设置当前loading handler方法
})

// retry
applyRetry(axiosInstance, {
   maxCount: 3, // 重试次数
   delay: true, // 重试延迟
   validateError: (err)=> true // 触发retry的条件
})

axiosInstance.request({
  retry: true // 是否使用 retry, 或自定义设置重写 registRetry 参数
}）

// catchError
applyCatchError(axiosInstance,{
    // 当接口通过body返回异常消息，可通过此方法判断
    serializerData(data){
      if(data.success){
        return data.data
      }else{
        return Promise.reject(new Error(data.message))
      }
    },
  handler: (err)=> new Promise(()=>{}) // 全局catch error 方法，默认会阻止往后执行
})

axiosInstance.request({
  catchError: true // 是否启用catch error
}）
```

--------------------------------

### Defining and Registering GraphQL API (JavaScript)

Source: https://github.com/acehubert/ace-fetch/blob/master/packages/graphql-vue/README.md

Demonstrates how to initialize a fetch instance with Apollo Client, apply global plugins like error handling, define a specific GraphQL API using `defineRegistGrapqhl` with query definitions, and apply local plugins.

```javascript
import { ApolloClient } from '@apollo/client';
import { createCatchErrorPlugin } from '@ace-fetch/graphql';
import { createFetch, defineRegistGrapqhl, getActiveFetch, FetchVuePlugin, gql } from '@ace-fetch/graphql-vue';

const client = new ApolloClient({
  uri: 'http://localhost:3000/graphql',
  cache: new InMemoryCache(),
});
const graphqlFetch = createFetch(client);

// 注册全局插件
graphqlFetch.use(
  createCatchErrorPlugin({
    handler: (error) => {
      // 处理异常
      return new Promise((resolve) => {});
    },
  }),
);

interface User {
  id: number;
  firstName: string;
  lastName: string;
  city: string;
}

// 定义 regsitGrapqhl
const useUserApi = defineRegistGrapqhl('user', {
  definition: {
    getUsers: gql`
      query getUsers($page: Int, $size: Int) {
        users(page: $page, size: $size) {
          id
          firstName
          lastName
          city
        }
      }
    `,
  },
  // 注册本地插件（插件注意执行先后顺序，本地插件优先于全局插件执行）
  plugins:[
    createCatchErrorPlugin({
      handler: (error) => {
        // 处理异常
        return new Promise((resolve) => {});
      },
    })
  ]
});
```

--------------------------------

### Configuring Multiple GraphQL Clients (JavaScript)

Source: https://github.com/acehubert/ace-fetch/blob/master/packages/graphql-vue/README.md

Explains how to set up @ace-fetch/graphql-vue to handle multiple GraphQL endpoints by using a client factory function when creating the fetch instance and specifying client options per API definition.

```javascript
// client 定义成工厂函数
const graphqlFetch = createFetch((options) => {
  return new ApolloClient({
    links: [new HttpLink({ uri: options.uri })],
    cache: new InMemoryCache(),
    ...options,
  });
});

// 定义 regsitGrapqhl
const useUserApi = defineRegistGrapqhl('user', {
  definition: {
    getUsers: gql`
      query getUsers($page: Int, $size: Int) {
        users(page: $page, size: $size) {
          id
          firstName
          lastName
          city
        }
      }
    `,
  },
  // 当定义了 clientOptions 时，将会创建一个新的 client 用于当前 registGraphql
  clientOptions: {
    link: new HttpLink({ uri: 'http://localhost:3000/graphql' }),
  },
});
```

--------------------------------

### Defining API with defineRegistApi (JavaScript)

Source: https://github.com/acehubert/ace-fetch/blob/master/packages/vue/README.md

Demonstrates how to create a fetch instance, register global plugins, and define a specific API endpoint using defineRegistApi, including local plugins.

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

--------------------------------

### Using @ace-fetch/vue in Vue 2 (JavaScript)

Source: https://github.com/acehubert/ace-fetch/blob/master/packages/vue/README.md

Shows how to integrate @ace-fetch/vue into a Vue 2 application, register the plugin, attach the fetch instance to the Vue app, and use the defined API within components (options API and composition API) and outside components.

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

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.