取消发布请求并中止无法正常工作

Question

我正在尝试从 Next.js 应用程序调用发布请求。但是，有一个取消按钮可以停止发布请求。我正在尝试使用 Axios (v1.4.0)

abortController

来停止发布请求。

当我调用取消函数“cancelUploadHandler”时，它被调用，但请求并未停止。

  const abortController = new AbortController()

  const completeHandler = async () => {
      try {
        const response = await axios.post(
          process.env.APP_URL + "post-url/",
          data,
          {
            onUploadProgress: (progress) => {
              console.log(progress)
            },
            withCredentials: true,
            signal: abortController.signal
          }
        );
        return response.data;
      } catch (error) {
        if (axios.isCancel(error)) {
          console.log("Request canceled:", error.message);
        } else {
          console.log(error)
        }
      }
  };

  const cancelUploadHandler = () => {
    console.log("CANCEL REQUEST")
    abortController.abort()
  }

Answer 1

您无法“撤消”已经发生的网络请求。

abort()

所做的只是停止 JavaScript 环境中与网络相关的异步任务。正如您可以在 MDN 上阅读的：

AbortSignal

接口表示一个信号对象，它允许您与异步操作（例如获取请求）进行通信，并在需要时通过 AbortController 对象中止它。

如果在请求完成之前点击取消按钮，您将进入

catch

博客并出现错误。但对于被调用的服务器来说，没有任何改变。

Answer 2

我们创建 AbortController 的实例并从中获取信号属性。 当发出获取请求时，我们将信号传递给获取请求的信号选项。 稍后，如果您想中止请求，可以调用控制器上的 abort() 方法。这将导致 fetch 请求抛出 AbortError 并拒绝 fetch() 返回的 Promise。

import NavBarItem from "./NavBarItem";
import Loading from "./Loading";
import { Suspense } from "react";
// Create an instance of AbortController
const controller = new AbortController();
const { signal } = controller;

// Create a fetch request with the signal
const url = 'https://example.com/api/data';
const fetchData = async () => {
  try {
    const response = await fetch(url, {
      method: 'POST',
      signal: signal, // Pass the signal to the fetch options
      // Add other fetch options (e.g., headers, body)
    });
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Fetch error:', error);
  }
};

// Call the fetchData function
fetchData();

// Later, if you want to abort the request
controller.abort();

function NavBar() {
  return (
    <div className="flex dark:bg-slate-600 bg-amber-100 p-4 lg:text-lg justify-center gap-6 mb-8 sm:mb-10">
    {/* useParam similarity --my pov */}
      <NavBarItem title="Trending" param="fetchTrending"/>
      <Suspense fallback={<Loading />}><NavBarItem title="Top Rated" param="fetchTopRated" /></Suspense>
    </div>
  );
}

export default NavBar;