Как использовать AsyncData с Promise.all для получения данных от клиентской стороны работает несколько API, но приводит к nginx до 504 - PullRequest
Новая
       35

Как использовать AsyncData с Promise.all для получения данных от клиентской стороны работает несколько API, но приводит к nginx до 504

1 голос
/ 10 октября 2019

В настоящее время я конвертирую приложение vue для использования инфраструктуры NUXT. Чтобы добавить поддержку SSR в мое приложение, я столкнулся со следующей проблемой при попытке использовать asyncData с несколькими источниками данных на одной странице.

Я пытаюсь настроить asyncData для получения данных из 2 отдельных источников данных. которые необходимы для работы страницы. Теперь код работает на стороне клиента, когда Promise.all разрешает получать оба набора данных. Однако на стороне сервера обещания, когда обещания console.log ожидают выполнения, приводят к тому, что время ожидания Nginx истекает и выдает ошибку 504 шлюза.

Я попытался заставить это работать, используя async / await иОбещаю. безрезультатно. см. примеры кода ниже.

Функции импорта getData и getJsonFile используют Axios и возвращают разрешенные обещания с объектами данных. 

// Using async/await
export default {
  async asyncData(context) {
    const nameData = await getData('getInformationByNames', {
      names: [context.params.name],
      referingPage: `https://local.test.com${context.route.fullPath}`
    });

    const content = await getJsonFile(
      `/data/pages/user/${context.params.id}`
    );

    return {
      names: nameData,
      content
    };
  }
}

// Using Promise.all
export default {
  async asyncData(context) {
    const [nameData, content] = await Promise.all([
      getData('getInformationByNames', {
        names: [context.params.name],
        referingPage: `https://local.test.com${context.route.fullPath}`
      }),
      getJsonFile(`/data/pages/user/${context.params.id}`)
    ]);
    return {
      names: nameData,
      content
    };
  }
}

// getJsonFile

import axios from 'axios';
import replaceStringTokens from '@/scripts/helpers/replaceStringTokens';

export default function getJsonFile(path, redirect = true) {
  const jsonFilePath = `${path}.json`;

  return axios.get(jsonFilePath).then((response) => {
    if (typeof response.data === 'object') {
      return replaceStringTokens(response.data);
    }
    return false;
  });
}

// getData

import axios from 'axios';
import getUserDevice from '@/scripts/helpers/getUserDevice';

// require php-serialize node package to serialize the data like PHP would for the api endpoint.
const Serialize = require('php-serialize');

export default function getData(action, data) {
  const dataApiAddress = '/api/getData.php';

  const dataToPass = data || {};
  // all actions available on the api will need to know the users device so add it to the data.
  dataToPass.userDevice = getUserDevice();

  // package the data like the api expects to receive it
  const serializedAndEncodedData = encodeURIComponent(
    Serialize.serialize(dataToPass)
  );

  const axiosParams = {
    action,
    data: serializedAndEncodedData
  };

  return axios
    .get(dataApiAddress, {
      params: axiosParams
    })
    .then((response) => {
      return response.data.data;
    })
    .catch((error) => {
      console.log(error);
      return false;
    });
}

Iожидается, что обещания разрешатся, и оба набора данных будут возвращены доступными для использования страницей как на стороне клиента, так и на стороне сервера.

Есть ли лучший способ получить несколько наборов данных или способ отладки на стороне сервера, чтобы я мог видеть, что приводит к тому, что обещания не разрешаются на сервере?

1 Ответ

0 голосов
/ 11 октября 2019

Исправлена ​​проблема, связанная с некоторыми расхождениями в данных, запрашиваемых через API. Данные в базе данных использовали заглавную букву в начале, которая должна быть введена неправильно. Так что это привело к тому, что обещание не было выполнено из-за того, что API отправил запрос для строчной версии и, в свою очередь, вызвало тайм-аут Nginx.

...