获取蛙核

具体实施 取出蛙类。 。 。 .

以 SSR 同步进行反应获取( Nuxt 使用 Fatch)

// src/composables/apiClients.ts
import { createUseFetchClient } from '@fetch-frog/nuxt';
import type { paths } from '~/types/api/v1'; // generated api types

export const reactiveApiClient = createUseFetchClient<paths>(
    'https://petstore3.swagger.io/api/v3',
    {}
);

// src/pages/index.vue
import { reactiveApiClient } from '~/composables/apiClient';

const { data } = await reactiveApiClient('/pet/{petId}', {
    path: {
        petId: 'frog'
    }
});

console.log(data.value);

可编译包装

由于 Nuxt/Vue 的工作方式,如果您想要从商店或插件中传递默认值,您就需要将创建函数包入返回创建函数的函数中. 你将无法进入其他堆肥 / 商店,例如 useRuntimeConfig 否则.

// src/composables/apiClients.ts

import { createUseFetchClient } from 'fetch-frog';
import type { paths } from '~/types/api/v1';

export function createApiClient() {
    const { user } = useNuxtApp().$auth;
    const baseUrl = `${useRuntimeConfig().public.apiUrl}/api/v1`;

    return createUseFetchClient<paths>(baseUrl, {
        onRequest: async ({ options }) => {
            options.headers = {
                ...options.headers,
                Authorization: `Bearer ${user.value?.accessToken}`
            };
        }
    });
}

// src/pages/index.vue

const apiClient = createApiClient();
const { data } = await apiClient('/pet/{petId}', {
    path: {
        petId: 'frog'
    }
});

发展

软件包支持 Nuxt 4.6.1 并上(^4.6.1) (中文(简体) ). pnpm test:types 类型通过 tsconfig.typecheck.json ,在 devDependencys中对照 Nuxt 版本检查软件包.

pnpm test 进行类型检查和单位测试.