Nuxt API Party

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

功能

🪅 產生的組合式元件
🔒 保護用戶端中的 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，則產生的組合式元件為

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