Question

我正在使用ngrok将本地Web服务器公开到Internet。在ngrok的终端窗口中，您可以看到HTTP请求列表。

我在我的React Native应用中使用axios进行HTTP请求。

我正在实现实时搜索组件，并且我想取消先前的请求，以免最终结果混乱。我在请求中实现了canceltoken。到目前为止，这是我的代码（简体）：

const cancelToken = axios.CancelToken;
let source;

const liveSearch = async (searchQuery) => {
  try {
    if (source) {
      source.cancel();
    }
    source = cancelToken.source();
    const response = await axios({
      method: 'get',
      url: `http://x.ngrok.io/search/${searchQuery}`,
      cancelToken: source.token
    });
    return response.data
  } catch (err) {
    if (axios.isCancel(err) {
      console.log(`cancelled request: ${searchQuery}`);
    }
  }
};

如您所见，是否首先检查源是否存在。如果是这样，请取消它，然后创建一个新源。然后，我将cancelToken作为对象属性进行请求。

当我运行应用程序并检查应用程序的控制台输出时，我正确地看到了“已取消的请求”。但是，在ngrok中，我仍然看到“已取消”请求的HTTP请求。一个例子：

在控制台输出应用程序中（搜索“ hello”）：

- cancelled h
- cancelled he
- cancelled hel
- cancelled hell

在ngrok终端窗口中：

- GET /search/hello 304 Not Modified
- GET /search/hell  304 Not Modified
- GET /search/hel   304 Not Modified
- GET /search/he    304 Not Modified
- GET /search/h     304 Not Modified

我的axios canceltoken的实现是否存在问题？还是ngrok记录所有请求（甚至是已取消的请求）是“正常”的事情？

axios取消的请求仍显示在ngrok中

0 个答案: