abortableFetch.ts

let filterAbortController: AbortController | null = null
const responseSettings = {
  method: "GET",
}

const filterProducts = async (page?: string) => {
  // Abort the previous request if it exists
  if (filterAbortController) {
    filterAbortController.abort()
  }

  // Create a new AbortController for the current request
  filterAbortController = new AbortController()
  const {signal} = filterAbortController

  section?.classList.add("--loading")
  let removeLoading = true

  try {
    const response = await fetch("your-url", {...responseSettings, signal})

    if (response.ok) {
      const data = (await response.json()) as productsData
      if (data.success) {
        console.log("do your stuff with data")
      }
    }
  } catch (error) {
    if (error.name === "AbortError") {
      console.log("Previous filterProducts request aborted.")
      removeLoading = false
    } else {
      console.error("Error fetching products:", error)
    }
  } finally {
    if (removeLoading) section?.classList.remove("--loading")
  }
}