NUXT-PWA для кеширования POST-запроса - PullRequest
Новая
       39

NUXT-PWA для кеширования POST-запроса

0 голосов
/ 02 ноября 2019

Я использую NUXT-PWA для кэширования своих данных, но у меня есть страница, которая зависит от POST запроса на сборку, и мне нужно кэшировать ответ, который JSON, но я получаю ошибку ниже:

Uncaught (in promise) attempt-to-cache-non-get-request: Unable to cache '/api/hotel/order/get-voucher' because it is a 'POST' request and only 'GET' requests can be cached.

код, который я использую в моем workbox-range-request.js, таков: 

workbox.routing.registerRoute(
  new RegExp('/api/(.*)'),
  new workbox.strategies.CacheFirst({
    cacheName: 'apiCache',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 100,
        maxAgeSeconds: 7 * 24 * 60 * 60, // 7 Days
      }),
    ],
  }),
  'POST'
);

и мой nuxt.config.js: 

  workbox: {
    dev:true,
    cachingExtensions: '@/plugins/workbox-range-request.js',
    runtimeCaching: [
      {
        urlPattern: 'https://www.google-analytics.com/.*',
        handler: 'StaleWhileRevalidate',
        method: 'GET',
        strategyOptions: { cacheableResponse: { statuses: [0, 200] } }
      }
    ]
  },

в документе говорится, что он поддерживает POST, но в консоли я получил ошибку, а в моем cacheStore я не получил никаких данных.

1 Ответ

0 голосов
/ 05 ноября 2019

Cache Storage API не позволяет использовать запрос POST в качестве ключа при сохранении записи. Частично это связано с тем, что запрос POST «традиционно» является чем-то, что фактически отправляется на сервер для внесения изменений в удаленное состояние, и в этой модели выполнение этого с помощью локального кэшированного ответа, даже не достигнув сервера, не 'не имеет смысла.

Но ... допустим, что вы действительно получаете значимые данные обратно в теле ответа после отправки запроса POST, и вы хотите сохранить это тело ответа с помощью Cache Storage API, используяGET запрос с потенциально другим URL-адресом в качестве ключа кэша.

Это можно сделать с помощью Workbox через cacheKeyWillBeUsed пользовательский плагин : 

const savePostResponsePlugin = {
  cacheKeyWillBeUsed: async ({request, mode}) => {
    if (mode === 'write') {
      // Use the same URL as `POST` request as the cache key.
      // Alternatively, use a different URL.
      return request.url;
    }
  },
};

workbox.routing.registerRoute(
  new RegExp('/api/(.*)'),
  new workbox.strategies.CacheFirst({
    cacheName: 'apiCache',
    plugins: [
      // Add the custom plugin to your strategy.
      savePostResponsePlugin,
      new workbox.expiration.Plugin({...}),
    ],
  }),
  'POST'
);

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

Если вы просто ищете способдля повторной отправки запросов POST, если первоначальная попытка не удалась из-за отсутствия соединения, я бы рекомендовал вместо этого использовать workbox-background-sync.

...