AbortController로 Javascript API 요청을 취소하는 방법

15369 단어 htmljavascriptwebdevfrontend
fetch API는 HTTP 요청을 만들기 위한 JavaScript API입니다. 대부분의 브라우저에서 더 이상 사용되지 않는 XMLHttpRequest를 대체합니다. Promise 기반 API입니다. 즉, 요청이 완료되면 해결되거나 거부되는 Promise 객체를 반환합니다.


fetch() 함수를 살펴보겠습니다.



fetch(url)
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error(error));




훌륭하지만 때때로 이미 시작된 요청을 취소하고 싶을 때가 있습니다.

다음 예를 살펴보겠습니다.
사용자 유형으로 제안을 표시하려는 검색 입력이 있다고 가정합니다. 사용자가 문자를 입력하면 fetch() 함수를 호출하고 검색 입력 필드의 값을 URL 매개변수로 전달합니다.

fetch(`${url}?q=${searchInput.value}`)
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error(error));


문제:



fetch() 함수는 사용자가 문자를 입력할 때마다 호출됩니다. 이는 여러 번 호출되고 마지막 응답에만 관심이 있기 때문에 비효율적인 접근 방식입니다.

해결책:



debounce() 함수를 사용하여 fetch() 함수가 호출되는 횟수를 제한하십시오. 사용자가 특정 기간(100ms) 동안 입력을 중지한 후에만 호출됩니다. 이것은 API에 대한 불필요한 호출을 피하는 좋은 방법입니다.

극단적인 경우: 사용자가 debounce()가 호출된 직후 타이핑을 시작하면 어떻게 됩니까? 이 경우에는 fetch() 함수가 다시 호출됩니다. 이전 접근 방식보다 낫습니다.

이 문제를 어떻게 처리할 수 있습니까?

여기서 AbortController이 유용합니다. AbortController를 사용하여 이미 시작된 요청을 취소할 수 있습니다(fetch 사용). 최신 브라우저에는 AbortController 인터페이스가 내장되어 있습니다.

AbortController() 생성자를 사용하여 새AbortController 객체를 만들 수 있습니다.

속성:




AbortController.signal :

DOM 요청과 통신하거나 중단하는 데 사용할 수 있는 AbortSignal 개체 인스턴스를 반환합니다.

방법:




AbortController.abort() :

완료되기 전에 DOM 요청을 중단합니다. 비동기 작업을 중단하면 Promise는 AbortError라는 DOMException과 함께 거부됩니다.


실제 사례



여기서는 debounce() 함수를 만들지 않고 다음 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
  <body>
    <input id="search" type="number" />
    <script>
      const results = [];
      const search = document.getElementById("search");
      let controller = new AbortController();
      let signal = controller.signal;

      const getPost = async (value, signal) => {
        try {
          const response = await fetch(
            `https://jsonplaceholder.typicode.com/posts/${value}`,
            { signal }
          );
          results.push(`Success: ${value}`);
        } catch (error) {
          if (error.name === "AbortError") {
            results.push("API failure");
          } else {
            console.log("Some other error");
          }
        } finally {
          console.log("Status", results);
        }
      };
      const onChange = () => {
        const value = search.value;
        if (value) {
          controller.abort();
          controller = new AbortController();
          signal = controller.signal;
          getPost(value, signal);
        }
      };
      search.onkeyup = onChange;
    </script>
  </body>
</html>


반응 예




useEffect(() => {
  const controller = new AbortController();
  const signal = controller.signal;
  const results = [];
  const getPost = async (value) => {
    try {
      const response = await fetch(
        `https://jsonplaceholder.typicode.com/posts/${value}`,
        { signal }
      );
      results.push(`Success: ${value}`);
    } catch (error) {
      if (error.name === "AbortError") {
        results.push("API failure");
      }
    } finally {
      console.log("Status", results);
    }
  };

  getPost(1);

  return () => {
    // Cancel the request on unmount
    controller.abort();
  };
}, []);


Note: Better approach could be combining debounce() and AbortController.





당신이하지 않은 경우 읽어야합니다













자세한 내용은 .


Github , , , Medium , Stackblitz에서 나를 잡아라.
DTDL 파서 확장
TauriのDialogを試してみる

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage