On gists

Fetch

Nuxt

server-api-product.js Raw #

export default defineEventHandler(async (event) => {
  // Získání dat z externího API pomocí $fetch
  const products = await $fetch('https://externi-api.com/products', {
    headers: {
      'Authorization': `Bearer ${process.env.API_KEY}`
    }
  })
  
  // Transformace dat na serveru
  return products.map(product => ({
    id: product.product_id,
    title: product.product_name,
    price: `${product.price} ${product.currency}`,
    inStock: product.stock_quantity > 0
  }))
})

product2.js Raw #

<script setup>
// SSR + hydratace - data jsou načtena při sestavení stránky
const { data: products, pending } = useFetch('/api/products')

// NEBO lazyFetch - data jsou načtena až po načtení stránky
// const { data: products, pending } = useLazyFetch('/api/products')
</script>

error-handling-server-api-produc Raw #

export default defineEventHandler(async (event) => {
  try {
    // Získání dat z externího API
    const products = await $fetch('https://externi-api.com/products', {
      headers: {
        'Authorization': `Bearer ${process.env.API_KEY}`
      }
    })
    
    return products.map(product => ({
      id: product.product_id,
      title: product.product_name,
      // další transformace...
    }))
  } catch (error) {
    // Zpracování chyby
    console.error('API error:', error)
    
    // Můžete nastavit vlastní stavový kód a chybovou zprávu
    throw createError({
      statusCode: error.statusCode || 500,
      statusMessage: 'Chyba při získávání produktů',
      data: {
        originalError: error.message
      }
    })
    
    // NEBO jednodušší varianta:
    // return { error: 'Nepodařilo se načíst produkty', status: 'error' }
  }
})

product.js Raw #

// 1 Základní ošetření pomocí error property:
<script setup>
const { data, error, pending } = useFetch('/api/products')
</script>

<template>
  <div v-if="pending">Načítání...</div>
  <div v-else-if="error">
    <p>Došlo k chybě: {{ error.message }}</p>
    <button @click="refresh">Zkusit znovu</button>
  </div>
  <div v-else>
    <!-- zobrazení dat -->
  </div>
</template>


// 2 Pokročilé ošetření s onError handlerem:
<script setup>
const { data, error, pending, refresh } = useFetch('/api/products', {
  onError: (err) => {
    // Vlastní zpracování chyby
    console.error('Chyba při načítání dat:', err)
    
    // Můžete provést další akce - např. zobrazit notifikaci
    // useToast().error('Nepodařilo se načíst produkty')
    
    // Můžete také rozhodnout, jaký objekt se vrátí jako `error`
    return {
      message: 'Chyba při komunikaci se serverem',
      code: err.statusCode,
      retry: true
    }
  }
})

// Funkce pro opakování fetchování
function retryFetch() {
  refresh()
}
</script>

<template>
  <div v-if="pending">Načítání...</div>
  <div v-else-if="error">
    <p>{{ error.message }}</p>
    <p v-if="error.code">Kód chyby: {{ error.code }}</p>
    <button v-if="error.retry" @click="retryFetch">
      Zkusit znovu
    </button>
  </div>
  <div v-else>
    <!-- zobrazení dat -->
  </div>
</template>


// 3 globalni
<!-- /error.vue -->
<script setup>
const props = defineProps({
  error: Object
})

function handleError() {
  // Přesměrování zpět na hlavní stránku
  navigateTo('/')
}
</script>

<template>
  <div class="error-page">
    <h1>Jejda! Něco se pokazilo</h1>
    <p>{{ error.message }}</p>
    <p v-if="error.statusCode">Stavový kód: {{ error.statusCode }}</p>
    <div>
      <button @click="handleError">
        Zpět na hlavní stránku
      </button>
    </div>
  </div>
</template>


Tento přístup zachytí chyby z celé aplikace včetně API volání, pokud použijete throw createError() nebo showError().