Как сделать так чтобы работала обработка Отмены запроса?

Question

[miliko mikoyan]

я сделал component Pul который делает запрос на сервер и обрабатывает его.

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

function Pul() {
  const [listImg, setLis] = useState([]);
  const [resError, setResError] = useState("");
  useEffect(() => {
    const abortController = new AbortController();
    const signal = abortController.signal;
    (async () => {
      try {
        const Res = await fetch("https://kijo-3c490.firebaseio.com/.json", {
          signal: signal
        });
        if (!Res.ok) {
          throw new Error("Page Not Found 404");
        }
        const Product = await Res.json();
        setLis(
          Object.values(Product).filter(({ title }) => title.includes("New"))
        );
      } catch (error) {
        setResError(error.message);
      }
      return () => {
        abortController.abort();
      };
    })();
  }, []);
  console.log(listImg, resError);
  return <div />;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Pul />, rootElement);

Hо я хочу сделать отдельный class ProcessingRequest для заброса и обработки.

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import ProReqObj from "./ProcessingRequest";

Pul.jsx

function Pul() {
  const [listImg, setLis] = useState([]);
  const [resError, setResError] = useState("");
  useEffect(() => {
    (async () => {
      const Res = await ProReqObj.Request1(
        "https://kijo-3c490.firebaseio.com/.json"
      );
      if (typeof Res !== "string") {
        setLis(Res);
      } else {
        setResError(Res);
      }
    })();
  }, []);
  console.log(listImg, resError);
  return <div />;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Pul />, rootElement);


ProcessingRequest.jsx

class ProcessingRequest {
  async Request0(URL) {
    try {
      const Res = await fetch(URL);
      if (!Res.ok) {
        return "Page Not Found 404";
      }
      const ProductArr0 = await Res.json();
      return ProductArr0;
    } catch (error) {
      return error.message;
    }
  }
  async Request1(URL1) {
    try {
      const ProductArr1 = await this.Request0(URL1);
      if (typeof ProductArr1 === "string") return ProductArr1;
      ProductArr1.filter(({ title }) => title.includes("New"));
      return ProductArr1;
    } catch (error) {
      return error.message;
    }
  }
}

export default new ProcessingRequest();

Как сделать так чтобы работала Отмены запроса?

Answer 1

[LEXA_JA]

Как один из вариантов, можно добавить это в класс.

Request0() {
    // this.abort()
    // можно делать это тут, если запрос должен быть только один, а можно в useEffect
    this.abortController = new AbortController()
    
    // fetch

    finally {
      this.abortController  = null
    }
  }

  abort() {
    if (this.abortController) {
      this.abortController.abort();
      this.abortController = null
    }
  }

Comments

[miliko mikoyan]

можно увидеть общий код мне так не очень понятно.

[LEXA_JA]

@miliko0022

class ProcessingRequest {
  constructor() {
    this.abortController = null;
  }

  async Request0(URL) {
    try {
      this.abortController = new AbortController();
      // Вариант первый:
      this.abort()
      // При создании запроса, старый будет сразу отменяться
      const Res = await fetch(URL, { signal: this.abortController.signal });

      if (!Res.ok) {
        return "Page Not Found 404";
      }

      const ProductArr0 = await Res.json();

      return ProductArr0;
    } catch (error) {
      return error.message;
    }
  }

  async Request1(URL1) {
    try {
      const ProductArr1 = await this.Request0(URL1);

      if (typeof ProductArr1 === "string") {
        return ProductArr1;
      }

      return ProductArr1.filter(({ title }) => title.includes("New"));
    } catch (error) {
      return error.message;
    }
  }

  abort() {
    if (this.abortController) {
      this.abortController.abort();
    }
  }
}

function Pul() {
  const [listImg, setLis] = useState([]);
  const [resError, setResError] = useState("");

  useEffect(() => {
    (async () => {
      const Res = await ProReqObj.Request1(
        "https://kijo-3c490.firebaseio.com/.json"
      );

      if (typeof Res !== "string") {
        setLis(Res);
      } else {
        setResError(Res);
      }
    })();

    // Вариант второй
    // Компонент отменяет запрос
    return () => {
      ProReqObj.abort()
    };
  }, []);

  return <div />;
}