Nuxt API Party

Nuxt 模块，用于安全地连接到任何 API。

特性

🪅 生成的组合式函数
🔒 在客户端保护 API 凭据
🪢 内置基于令牌的身份验证或使用您自己的标头
🧇 连接多个 API 端点
🍱 使用起来就像 useFetch
🗃 缓存响应
🦾 强类型

设置

!TIP📖 阅读文档

npx nuxi@latest module add nuxt-api-party

基本用法

!TIP📖 阅读文档

将 Nuxt API Party 添加到您的 Nuxt 配置中，并通过为 apiParty 模块选项设置一个包含以下属性的端点对象来准备您的第一个 API 连接

// `nuxt.config.ts`
export default defineNuxtConfig({
  modules: ['nuxt-api-party'],

  apiParty: {
    endpoints: {
      jsonPlaceholder: {
        url: process.env.JSON_PLACEHOLDER_API_BASE_URL!,
        // Global headers sent with each request
        headers: {
          Authorization: `Bearer ${process.env.JSON_PLACEHOLDER_API_TOKEN}`
        }
      }
    }
  }
})

如果您要调用您的 API jsonPlaceholder，则生成的组合式函数为

$jsonPlaceholder – 返回响应数据，类似于 $fetch
useJsonPlaceholderData – 返回多个值，类似于 useFetch

在您的模板或组件中使用这些组合式函数

<script setup lang="ts">
const { data, refresh, error, status, clear } = await useJsonPlaceholderData('posts/1')
</script>

<template>
  <h1>{{ data?.title }}</h1>
  <pre>{{ JSON.stringify(data, undefined, 2) }}</pre>
</template>