es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Nuxt 3 solicitud HTTP a petición después del renderizado: una obtención en el lado del cliente.

Nuxt 3 solicitud HTTP a petición después del renderizado: una obtención en el lado del cliente.

28 Jul, 2023 Programación

Nuxt 3 tiene esas increíbles funciones de recuperación de datos (por ejemplo: useFetch), pero me encuentro en una situación en la que necesito hacer una solicitud después del tiempo de renderizado (por ejemplo: llamar desde un botón y enviar un término de búsqueda).

Hasta donde sé, useFetch no funciona en el lado del cliente, esto es lo que he intentado hacer

<template>

<button @click="goSearch()">Buscar</button>

</template>


setup() {
    const goSearch = async () => {
        const { data } = await useFetch('search', () => $fetch('/api/search'));
        console.log(data.value);
    };

    return { goSearch };
},

¿Nuxt3 ofrece una función incorporada para hacer solicitudes HTTP bajo demanda (como el axios oficial del lado del cliente)?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, Nuxt 3 ofrece una función incorporada para realizar solicitudes HTTP del lado del cliente llamada useContext. useContext te permite acceder a la instancia axios utilizada por defecto en Nuxt 3 y realizar solicitudes HTTP desde el lado del cliente. Aquí tienes un ejemplo de cómo puedes implementarlo en tu código:

    import { useContext } from "@nuxtjs/composition-api";

export default {
  setup() {
    const { $axios } = useContext();

    const goSearch = async () => {
      const { data } = await $axios.get("/api/search");
      console.log(data);
    };

    return { goSearch };
  },
};

    En este ejemplo, importamos la función useContext del paquete @nuxtjs/composition-api, que nos proporciona acceso a la instancia axios a través de la variable $axios. Luego utilizamos $axios para realizar una solicitud GET HTTP a /api/search cuando se llama a la función goSearch.

    Ten en cuenta que necesitarás instalar el paquete @nuxtjs/composition-api para que esto funcione. Puedes hacerlo ejecutando npm install @nuxtjs/composition-api o yarn add @nuxtjs/composition-api.

Comments are closed.