He estado luchando con esto por un tiempo. Sé cómo usar Nuxt asyncData para hacer una solicitud y cómo hacer varias solicitudes, pero ¿es posible hacer varias solicitudes con un condicional incorporado? por ejemplo, a veces hará una solicitud y, a veces, dos solicitudes, en función de un parámetro de consulta.
async asyncData({ $axios, route }) { if (route.query.query) { if (route.query.tab === 'companies') { // API Call "Search companies" return await $axios.$get(`/v1/search/companies/${route.query.query}`).then((res) => { return { tab: 'companies', query: route.query.query, companyResults: res.data.data, } }) } else { let company = null if (route.query.company) { // API Call "Read a company" await $axios.$get(`/v1/companies/${route.query.company}`).then((res) => { company = res.data }) } // API Call "Search requests" return await $axios.$get(`/v1/search/requests/${route.query.query}`).then((res) => { return { company, tab: 'requests', query: route.query.query, requestResults: res.data.data, } }) } } } El problema reside en la sentencia else . Si el parámetro de consulta "empresa" está configurado, quiero que realice las llamadas a la API "Leer una empresa" y "Solicitudes de búsqueda". Si el parámetro de consulta no está configurado, solo realizará la llamada a la API "Solicitudes de búsqueda".
Cuando ejecuto esto, se realizan todas las llamadas API correctas, pero los datos no se devuelven correctamente desde asyncData.
Creo que el problema es que estás usando una combinación extraña de async/await y promesas. Prueba esto:
async asyncData({ $axios, route }) { if (route.query.query) { if (route.query.tab === 'companies') { // API Call "Search companies" const response = await $axios.$get(`/v1/search/companies/${route.query.query}`) return { tab: 'companies', query: route.query.query, companyResults: response.data.data, } } else { let company = null if (route.query.company) { // API Call "Read a company" const response = await $axios.$get(`/v1/companies/${route.query.company}`) company = response.data } // API Call "Search requests" const reponse = await $axios.$get(`/v1/search/requests/${route.query.query}`) return { company, tab: 'requests', query: route.query.query, requestResults: reponse.data.data, } } } }Entonces resulta que el problema no fue con asyncData . Cuando usa $get Nuxt Axios, hay un acceso directo integrado que devuelve automáticamente los datos en lugar de un objeto con una propiedad de datos .
Esto significa que solo necesitaba reemplazar ".data.data" con un solo ".data".
async asyncData({ $axios, route }) { if (route.query.query) { if (route.query.tab === 'companies') { // API Call "Search companies" const response = await $axios.$get(`/v1/search/companies/${route.query.query}`) return { tab: 'companies', query: route.query.query, companyResults: response.data, } } else if (route.query.company) { // API Call "Read a company" and "Search requests" const [companyResponse, requestsResponse] = await Promise.all([$axios.$get(`/v1/companies/${route.query.company}`), $axios.$get(`/v1/search/requests/${route.query.query}`)]) return { company: companyResponse, tab: 'requests', query: route.query.query, requestResults: requestsResponse.data, } } else { // API Call "Search requests" const response = await $axios.$get(`/v1/search/requests/${route.query.query}`) return { tab: 'requests', query: route.query.query, requestResults: response.data, } } } },Un agradecimiento especial a Daniel Roe en Nuxt Github Repo .