即使chrome没有连接到互联网，Ajax-Http-Request也是挂起的

Question

我正在设置一个新的VueJS-Project，并在我的渐进式web应用程序中实现了一个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没有互联网连接。

以下是处于挂起状态而不是失败状态的请求的屏幕截图：

enter image description here

附注:我的web应用程序在localhost下运行。

Answer 1

这不是最好的解决方案，但我的伙伴Ilja KO找到了一个变通办法。我只是用axios的实例设置了一个超时来中止请求，即使chrome有没有连接到互联网。

axios.defaults.timeout = 5000;