Как заставить Axios использовать Fetch вместо XMLHttpRequest - PullRequest
Новая
       33

Как заставить Axios использовать Fetch вместо XMLHttpRequest

0 голосов
/ 18 января 2019

Я новичок в PWA, и я пытаюсь получить свой код для вызова API, а затем сохранить его в кеше браузера.Но я вижу, что axios использует XMLHttpRequest, а не API выборки, поэтому я не могу кэшировать мой вызов API.

Я использую рабочую коробку для работника службы и vue cli.my service-worker.js: 

   workbox.setConfig({
    debug: false,
  });

  workbox.precaching.precacheAndRoute([]);

  //image in cache
  workbox.routing.registerRoute(
    /\.(?:png|gif|jpg|jpeg|svg)$/,
    workbox.strategies.staleWhileRevalidate({
      cacheName: 'images',
      plugins: [
        new workbox.expiration.Plugin({
          maxEntries: 60,
          maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
        }),
      ],
    }),
  );

  //network request in cache
  workbox.routing.registerRoute(
    new RegExp('http://api.giphy.com/v1/gifs/'),
    workbox.strategies.networkFirst({
      cacheName: 'api',
    }),
  );

  //js and css in cache
  workbox.routing.registerRoute(
    /\.(?:js|css)$/,
    workbox.strategies.staleWhileRevalidate(),
  ); 

  //webfont in cache
  workbox.routing.registerRoute(
    new RegExp('https://fonts.(?:googleapis|gstatic).com/(.*)'),
    workbox.strategies.cacheFirst({
      cacheName: 'googleapis',
      plugins: [
        new workbox.expiration.Plugin({
          maxEntries: 30,
        }),
      ],
    }),
  );

мой registerServiceWorker.js: 

   import { register } from 'register-service-worker'

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready () {
      console.log(
        'App is being served from cache by a service worker.\n'
      )
    },
    registered () {
      console.log('Service worker has been registered.')
    },
    cached () {
         console.log('content in cached');
    },
    updatefound () {
      console.log('New content is downloading.')
    },
    updated () {
      console.log('New content is available; please refresh.')
    },
    offline () {

    },
    error (error) {
      console.error('Error during service worker registration:', error)
    }
  })
}

и мой API вызовов: 

import Vue from 'vue';
import CONSTANTS from '../constants/constants';
import exception_manager from 'exception_manager';

export default {
    getGiphy() {
        return Vue.axios.get(`${CONSTANTS.SERVER_ADDRESS}search?q=cat&api_key=${CONSTANTS.API_KEY}&limit=9`).catch(error => {
            exception_manager.handleException(error, 'GiphyService.js', 8, window, CONSTANTS.ERROR_SERVER_ADDRESS);
        });

    }
}

Я думаю, что это действительно историяс xmlhttprequest, но я не уверен.С другой стороны, файлы js, css и images хорошо кэшируются

1 Ответ

0 голосов
/ 23 января 2019

Ваш маршрут RegExp внутри сервисного работника ищет http://api.giphy.com/v1/gifs/, который является http: URL. Сервисные работники будут перехватывать только защищенные запросы, что означает https: (или http://localhost).

Убедитесь, что вы используете https: в своем коде Vue на стороне клиента, и настройте конфигурацию Workbox так, чтобы использовать https:.

...