Ajax-即使 chrome 没有互联网连接，Http-Request 仍处于挂起状态

Question

我正在设置一个新的 VueJS 项目，并在我的渐进式 Web 应用程序中实现了一个 workbox-backgroundSync。要测试这个 workbox 插件，我需要断开我的设备 (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中中断了网络，后台进程顺利完成。但这对用户来说不是最好的解决方案，因为他们不知道如何控制开发工具。

我预计请求会被取消，而 chrome 没有互联网连接。

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

enter image description here

旁注：我的 Web 应用程序在本地主机下运行。

Answer 1

不是最佳解决方案，但我的朋友 Ilja KO 找到了解决方法。我只是用 axios 的实例设置了一个超时来中止请求，即使 chrome 得到了 internet-connection 或没有。

axios.defaults.timeout = 5000;

Ajax-即使 chrome 没有互联网连接，Http-Request 仍处于挂起状态

Ajax-Http-Request is pending even if chrome got no internet connection

ajax

vue.js

axios

google-chrome-devtools

workbox