测试 React PWA 是否在线的函数从不 returns false

Question

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

我在桌面上使用 Chrome 来测试我的应用程序，我的服务器通过本地主机托管在我的桌面上。为了测试我的功能，我在我的应用程序上创建了一个临时按钮，当我单击它时它会运行该功能。然后，我在 Chrome devtools 上尝试不同的网络节流设置组合，并手动连接和断开我的服务器。只有当我的服务器已连接并且没有网络限制时，我才期望得到正输出。但是，我从来没有收到负输出。

我不确定我的测试方法是否可行，我也不确定我解决这个问题的方法是否正确。我对其他解决方案 and/or 测试方法持开放态度。有什么想法吗？

这是我的函数代码：

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 function, which means the return value will always be a Promise.

一个Promise对象是一个truthy value，所以你的

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

代码应该总是以记录 Online!.

结束

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

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

测试 React PWA 是否在线的函数从不 returns false

Function that tests if React PWA is online never returns false

javascript

reactjs

progressive-web-apps