자동 완성 검색을 위해 JavaScript에서 약속을 어떻게 취소할 수 있나요?

Promise - Promise

이 시나리오에서 사용자는 자동 검색을 수행하고 있습니다. 각 키 입력은 새로운 백엔드 호출을 트리거합니다. 사용자가 더 빠르게 입력할수록 이전 요청은 관련성이 없어지고 취소되어야 합니다.

ES6의 Promise는 현재 상태대로 기본적으로 취소를 지원하지 않습니다. 그러나 네트워크 요청과 같은 비동기 작업을 취소할 수 있는 크로스 플랫폼 기본 요소인 AbortController를 통해 취소 기능을 도입하려는 작업이 진행 중입니다.

AbortController 사용

현대적인 접근 방식으로 AbortController는 신호를 제공합니다. Promise를 반환하는 함수를 취소하는 데 사용할 수 있는 객체입니다. 구문은 다음과 같습니다.

<code class="javascript">async function somethingIWantToCancel({ signal } = {}) {
  // Use the signal object to manually adapt code for cancellation support
  const onAbort = (e) => {
    // Handle cancellation logic here
  };
  signal.addEventListener('abort', onAbort, { once: true });
  try {
    const response = await fetch('...', { signal });
  } catch (e) {
    if (e.name === 'AbortError') {
      // Deal with cancellation in caller
    } else {
      throw e;
    }
  } finally {
    signal.removeEventListener('abort', onAbort);
  }
}</code>

이 예에서 SomethingIWantToCancel 함수는 AbortController의 인스턴스인 신호 매개변수를 사용합니다. signal.addEventListener 리스너는 작업이 취소될 때 트리거되는 중단 이벤트에 대한 이벤트 핸들러를 등록합니다. finally 블록은 작업이 완료되면 이벤트 리스너가 제거되도록 보장합니다.

대안

AbortController가 옵션이 아닌 경우 또 다른 접근 방식은 Bluebird와 같은 타사 라이브러리를 사용하는 것입니다. 취소 기능을 제공합니다.

또 다른 대안은 취소 토큰을 사용하는 것입니다. 여기에는 요청을 취소하기 위해 호출할 수 있는 메서드에 함수를 전달하는 작업이 포함됩니다.

결론

ES6 Promise에는 기본 취소 지원이 없지만 AbortController 및 기타 대안은 비동기 작업을 취소하는 방법을 제공합니다. 현대 자바스크립트에서. 이전 시나리오의 경우 취소 토큰이나 타사 라이브러리를 사용하면 여전히 솔루션을 제공할 수 있습니다.

위 내용은 자동 완성 검색을 위해 JavaScript에서 약속을 어떻게 취소할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!