Nuxt API Party

Nuxt 模組，用於安全地連接到任何 API。

功能

🪅 產生的 composables
🔒 保護用戶端中的 API 憑證
🪢 內建基於令牌的身份驗證，或使用您自己的標頭
🧇 連接多個 API 端點
🍱 用起來就像 useFetch
🗃 快取的回應
🦾 強型別

設定

!提示📖 閱讀文件

npx nuxi@latest module add nuxt-api-party

基本用法

!提示📖 閱讀文件

將 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，則產生的 composables 為

$jsonPlaceholder – 傳回回應資料，類似於 $fetch
useJsonPlaceholderData – 傳回類似於多個值，類似於 useFetch

在您的範本或元件中使用這些 composables

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