Как обработать ответ AJAX с работником службы (Workbox) при восстановлении соединения - PullRequest
Новая
       19

Как обработать ответ AJAX с работником службы (Workbox) при восстановлении соединения

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

Я создаю PWA с помощью плагина Vue CLI 3 PWA, и я не уверен, как обработать ответ на вызов AJAX, сделанный в автономном режиме.

Все, что у меня есть, это в основном пример кода из документации Workbox ... 

// service-worker.js
const queue = new workbox.backgroundSync.Queue('CR_OfflineQueue')
self.addEventListener('fetch', (event) => {
  const promiseChain = fetch(event.request.clone())
    .catch((err) => {
      console.log('Queued Event:', event.request)
      return queue.addRequest(event.request)
    })
  event.waitUntil(promiseChain)
})

AJAX - это просто базовый Axios get(), который вызывается, когда хранилище загружено и в тестовой мутации 

// store.js
getUsername () {
    return axios.get(
        'http://localhost:8005/username/',
        {
            responseType: 'json',
            withCredentials: true
        })
}

const store = new Vuex.Store({
    state: {
        username: null
    },
    mutations: {
        test_api (state) {
            getUsername()
            .then((res) => {
                state.username = res.username
            })
            .catch((err) => {
                console.error('getUsername:', err)
            })
        }
    }
})

Запрос успешно воспроизводится, но я не знаю, что с ним делать, и я не могу найти пример, используя workbox.backgroundSync.Queue.

Что касается getUsername(), то запрос не удался, но как мне заставить вызывающую функцию по существу подхватить то, где она остановилась?

Я не думаю, что нужно что-то проверять в очереди на запрос через регулярные промежутки времени, чтобы «вручную» повторно запускать (не через автоматическое воспроизведение). Как бы я использовал класс очереди, чтобы взять результат из запроса воспроизведения и установить свойство имени пользователя?

...