AbortController 사용 이벤트 리스너를 제거하기위한 대안으로 사용합니다

AbortController 2017 년에 소개 된 이후 fetch() 요청을 취소하기위한 강력한 메커니즘을 제공했습니다. 이 기능은 간단한 API 통화를 넘어 확장되어 특히 드래그 앤 드롭 상호 작용과 같은 시나리오에서 이벤트 리스너 관리를위한 우아한 솔루션을 제공합니다.

간단한 예는 fetch() 요청을 취소하는 것을 보여줍니다.

 const 컨트롤러 = 새로운 abortController ();
const res = fetch ( '/', {Signal : Controller.Signal});
Controller.abort ();
Console.log (Res); // => 약속 (거부) : "Domexception : 사용자는 요청을 중단했습니다."

AbortController 또한 시간 초과 처리를 향상시켜 setTimeout 에 대한 더 깨끗한 대안을 제공합니다.

 함수 시간 초과 (지속 시간, 신호) {
  새로운 약속을 반환합니다 ((결의, 거부) => {
    const handle = settimeout (해결, 지속 시간);
    신호? .addeventListener ( 'Abort', () => {
      클리어 타임 아웃 (핸들);
      거부 (새로운 오류 ( 'aborted'));
    });
  });
}

// 용법
const 컨트롤러 = 새로운 abortController ();
const promise = timeout (10000, 컨트롤러 .Signal);
Controller.abort ();
Console.log (약속); // => 약속 (거부) : "오류 : 중단"

그러나 중요한 발전은 addEventListener 내에서 Chrome 88의 AbortSignal 에 대한 지원에 있습니다. 이를 통해 여러 이벤트 리스너를 동시에 제거하는 간소화 된 접근 방식이 가능하여 여러 removeEventListener 호출의 필요성을 대체합니다.

드래그 앤 드롭 예를 고려하십시오. 이전에는 mousedown , mousemove 및 mouseup 이벤트 관리를 사용하여 removeEventListener 사용하여 명시 적으로 제거해야했습니다.

 // removeEventListener를 사용합니다
el.addeventListener ( 'Mousedown', e => {
  if (e.buttons! == 1) 반환;

  const onmouseMove = e => {
    if (e.buttons! == 1) 반환;
    /* 일하다 */
  };

  const onmouseup = e => {
    if (e.buttons & 1) 반환;
    Window.removeEventListener ( 'MouseMove', OnMousEmove);
    Window.removeEventListener ( 'MouseUp', OnMouseUp);
  };

  Window.addeventListener ( 'MouseMove', OnMousEmove);
  Window.addeventListener ( 'MouseUp', OnMouseUp);
});

AbortController 사용하면 단일 abort() 호출은 모든 관련 리스너를 깨끗하게 제거합니다.

 // AbortController 사용
el.addeventListener ( 'Mousedown', e => {
  if (e.buttons! == 1) 반환;

  const 컨트롤러 = 새로운 abortController ();

  Window.addeventListener ( 'MouseMove', e => {
    if (e.buttons! == 1) 반환;
    /* 일하다 */
  }, {신호 : controller.signal});

  window.addeventListener ( '마우스 업', e => {
    if (e.buttons & 1) 반환;
    Controller.abort ();
  }, {신호 : controller.signal});
});

현재 Chrome 88만이 addEventListener 와의이 AbortSignal 통합을 완전히 지원합니다. 다른 브라우저는 AbortController 지원하지만이 특정 기능은 아직 널리 구현되지 않았습니다. 더 넓은 호환성을 위해 폴리 필드를 사용할 수 있습니다.

위 내용은 AbortController 사용 이벤트 리스너를 제거하기위한 대안으로 사용합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!