Nuxt JS - повторно использовать asyn c call (ax ios get) внутри смонтированного? - PullRequest
Новая
       56

Nuxt JS - повторно использовать asyn c call (ax ios get) внутри смонтированного?

0 голосов
/ 05 мая 2020

Если я визуализирую страницу с помощью Nuxt, Vue и Ax ios - есть ли способ повторно использовать запрос (или данные) asyncData ?. Например, если я визуализирую ответ, и пользователь выполняет действие на странице для фильтрации, сортировки и т. Д. c. данных, могу ли я повторно использовать те же данные для повторного рендеринга - или мне нужно сделать новый вызов в смонтированном состоянии? 

export default {
  asyncData ({ env, params, error }) {
    return axios.get(`${env.cockpit.apiUrl}/collections/get/cat_ruleset?token=${env.cockpit.apiToken}&simple=1&sort[ruleid]=1`)
      .then((res) => {
        return { catrules: res.data }
      })
      .catch((e) => {
        error({ statusCode: 404, message: 'Post not found' })
      })
  },
  mounted() {
  },
  methods: {
  }
}

1 Ответ

0 голосов
/ 05 мая 2020

Конечно, вы можете использовать его повторно. Самый простой способ - сохранить результат где-нибудь (правда, где угодно, но ваш магазин будет хорошим кандидатом на хранение) и изменить свой метод на: 

asyncData ({ env, params, error }) {
  return X ? Promise.resolve(X) : axios.get(...)
}

... где X - это сохраненный результат вашего предыдущего вызова.

Но вы не обязаны.

Потому что по умолчанию браузер сделает это за вас. Если вы специально не отключите кеширование для вашего вызова, браузер будет считать, что тот же вызов на сервер даст тот же результат, если вы сделаете это в течение количества секунд, установленных в max-age of Cache-control .

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

Вы можете легко определить, какие вызовы обслуживались из кеша, а какие - с сервера, просмотрев вкладку «Сеть» в DevTools в Chrome. Те из кеша будут иметь (memory cache) в столбце Size:

Image of cached resources

... и будут иметь значение 0ms в Time столбец.

Если вы хотите контролировать, когда вызывать сервер и когда обслуживать кешированный результат - большинство браузеров имеют ограничение на max-age (см. Ссылку выше) - вы можете ( и должен) хранить результат вашего предыдущего вызова и вообще не полагаться на кеш браузера (в основном внутренняя проверка внутри метода, который я предложил вверху).
Это позволит вам избежать длительного вызова после прохождения максимального возраста кеша, потому что у вас уже есть данные, если вы решите это сделать.

...