자바스크립트 ES6+: Fetch에서 요청을 취소하는 방법

참고: 자바스크립트: Fetch (외부 라이브러리 없이 AJAX 사용)

자바스크립트 Fetch APi에서 보냈던 요청을 취소하는 방법은 다음과 같습니다.

• 새로운 const abortController = new AbortController()를 생성
• fetch 옵션에 signal: abortController.signal 추가
• 요청 취소를 원하는 타이밍에 abortController.abort() 실행

// <pre class="result"></pre>
// <button class="btn-cancel">로딩 취소</button>

const init = () => {
    
    const result = document.querySelector(".result")
    const btnCancel = document.querySelector(".btn-cancel")
    
    const abortController = new AbortController() // AbortController 인스턴스 생성
    
    const initFetch = async() => {
    
        try {
            result.textContent = "로딩중..."
            const response = await fetch("https://reqres.in/api/users?delay=5", {
                signal: abortController.signal // 취소 액션이 실행될 경우 요청 취소
            })
            const text = await response.text()
            result.textContent = text
        } catch(err) {
            console.error(err)
        } 
    }
    
    initFetch()
    btnCancel.addEventListener("click", e => {
        abortController.abort() // 원하는 타이밍에 취소 요청 보내기
        result.textContent = "취소됨"
    })
    
}

init()

요청 취소를 하지 않았을 때

요청 취소를 했을 때

출처: fetch request의 처리를 취소하기