Ajax-Http-Request ожидает, даже если Chrome не подключен к Интернету

Question

Я настраиваю новый проект VueJS и внедрил workbox-backgroundSync в моем прогрессивном веб-приложении.Чтобы протестировать этот плагин для рабочего ящика, мне нужно отключить мое устройство (chrome) от интернета и запустить POST-запрос.В Chrome этот запрос находился в состоянии ожидания в течение пары минут, даже без подключения к Интернету.Поэтому мое приложение ожидает ответа на запрос.

Мой POST-запрос:

 axios
      .post('/createrecipe', recipe)
      .then(response => {
              commit('createRecipes', recipes);
              commit('setSnackbar', { text: "Recipe was created. ( " + response.data.status + response.status + " )", color:'success', snack:true });
                    console.log("Response from Server for create Recipe: ", response);
                })
                .catch(error => {
                    commit('setSnackbar', { text: "Your Post will be stored and send by Internet-Connection", color: 'warning', snack: true });
                    console.log(error)
                });

Мой ServiceWorker:

const matchCb = ({url, event}) => {
    return (url.pathname === '/api/createrecipe');
};

const bgSyncPlugin = new workbox.backgroundSync.Plugin('createdRecipes-post-storage-offline', {
    maxRetentionTime: 24 * 60, // Retry for max of 24 Hours
});

workbox.routing.registerRoute(
    matchCb,
    workbox.strategies.networkOnly({
        plugins: [bgSyncPlugin]
    }),
    'POST'
);

Я прервал работу сети в Chrome-devtoolпод вкладкой сети и фоновый процесс прошел успешно.Но это не лучшее решение для пользователей, потому что они не знают, как управлять devtool.

Я ожидаю, что запрос будет отменен, в то время как Chrome не имеет подключения к Интернету.

Здесьэто снимок экрана с запросом в состоянии ожидания, а не с ошибкой:

введите описание изображения здесь

Примечание: мое веб-приложение работает под localhost.

Answer 1

Не лучшее решение, но мой приятель Илья КО нашел обходной путь. Я просто установил тайм-аут с экземпляром axios, чтобы прервать запросы, даже если у chrome есть интернет-соединение или нет.

axios.defaults.timeout = 5000;