使用 Axios 检查调用是否已在运行

在 JavaScript 中，我们通常会使用 Axios 进行与后端服务器的通信。有时，我们希望在调用一个函数或者方法之前检查一个 Axios 调用是否已在运行。这在防止重复请求的情况下特别有用。

下面是一个简单的使用 Axios 检查调用是否已在运行的实现示例：

let isCurrentlyFetching = false;

function fetchData() {
  if (isCurrentlyFetching) {
    console.log("正在处理请求，请稍等...");
    return;
  }
  
  isCurrentlyFetching = true;
  
  axios.get("https://jsonplaceholder.typicode.com/posts")
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      console.error(error.message);
    })
    .finally(() => {
      isCurrentlyFetching = false;
    });
}

在上面的例子中，我们设置了一个 boolean 变量 isCurrentlyFetching 来记录 Axios 是否已在运行。在 fetchData 函数中，我们检查 isCurrentlyFetching 的状态并在需要时阻止 axios 调用。

如果 isCurrentlyFetching 变量为 true，则向控制台输出 "正在处理请求，请稍等..."，并返回。否则，我们将 isCurrentlyFetching 设置为 true 并执行 axios 调用。在最后的 finally 方法中，我们将 isCurrentlyFetching 变量重置为 false。

这样，我们就能够确保只有一个 Axios 调用在运行，并避免重复发起请求。

除了上面示例中的方法，还可以使用 Axios 的 cancel 函数来取消请求。这需要我们在每个 axios 调用前设置一个 cancelToken，以便我们能够调用该调用的 cancel 函数。

下面是一个使用 Axios 的 cancel 函数取消请求的实现示例：

let cancelTokenSource = axios.CancelToken.source();

function fetchData() {
  axios.get("https://jsonplaceholder.typicode.com/posts", {
     cancelToken: cancelTokenSource.token
  })
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      if (axios.isCancel(error)) {
        console.log("请求已被取消");
      } else {
        console.error(error.message);
      }
    });
}

function cancelFetch() {
  cancelTokenSource.cancel("手动取消请求");
}

在上例中，我们在声明 Axios 调用前使用 axios.CancelToken.source() 创建一个 cancelTokenSource。在调用 axios.get 方法时，我们将 cancelToken 选项设置为此 cancelTokenSource 的 token 属性。这允许我们在需要时使用 cancelTokenSource.cancel() 函数手动取消正在运行的 Axios 调用。如果 Axios 调用被取消，则会输出 "请求已被取消"。

Axios 的单个示例可能会稍有不同，但重要的是要始终遵循最佳做法，确保在代码中使用 axios 时能够对函数或方法进行检查并处理。