测试React PWA是否在线的函数永远不会返回false

Question

我正在使用ReactJS创建一个渐进式web应用程序。我的应用程序需要确定它是否能够连接到我的服务器，以便它可以知道如何处理提交的数据。为此，我试图编写一个函数，当且仅当向服务器发出HEAD请求成功时返回true。

我在桌面使用Chrome来测试我的应用程序，我的服务器通过localhost托管在我的桌面。为了测试我的函数，我在我的应用程序上创建了一个临时按钮，当我点击它时，它就会运行这个函数。然后，我在Chrome devtools上尝试不同的网络节流设置组合，并手动连接&断开我的服务器连接。只有当服务器连接并且没有网络限制时，我才期望得到正输出。然而，我从来没有收到一个负的输出。

我不确定我的测试方法是否正确，我也不确定我解决这个问题的方法是否正确。我对其他解决方案和/或测试方法持开放态度。任何想法吗?

下面是我的函数代码:

const isOnline = async () => {
if (!window.navigator.onLine) return false;
// I use the origin to prevent CORS errors
const url = new URL(window.location.origin);
// Set a random search parameter to make sure no request falls back on the cache
url.search = new URLSearchParams({
isonline: createId(), // Returns a random string of a certain length
});
try {
// HEAD request is sufficient for my needs
const response = await axios.head(url.toString());
console.log(response);
// Return true if the request was valid
if (response.status >= 200 && response.status <= 299) return true;
else return false;
} catch {
return false;
}
};

这里是我的代码为我的按钮的事件处理程序:

const onClickIsOnline = () => {
isOnline() ? console.log('Online!') : console.log('Offline :(');
};

Answer 1

isOnline定义为async函数，即返回值始终为Promise。

一个Promise对象是一个真值，所以你的

jsisOnline() ? console.log('Online!') : console.log('Offline :(');

代码应该最终总是记录Online!。

我相信你的意图是使用Promise解析的值来确定你记录的内容。最直接的方法是将then()链接到Promise:

jsisOnline().then(returnValue => {
returnValue ? console.log('Online!') : console.log('Offline :(');
});