[JavaScript] 자바스크립트에서 XMLHttpRequest로 작업 취소하기

233_자바스크립트에서 XMLHttpRequest로 작업 취소하기

[적용]

• 네트워크 통신 중인 작업을 취소하고 싶을 때

---

[문법]

메소드	의미	반환
abort()	데이터 전송 작업 취소	없음

---

[내용]

abort()를 사용하면 XMLHttpRequest 객체 인스턴스가 진행 중인 데이터 송수신 작업을 중단할 수 있으며,

이때 발생하는 이벤트는 load가 아닌 abort 이벤트다.

다음 샘플은 50%의 확률로 작업이 실패하도록 의도한 코드다.

몇 번의 작업 후 실패가 발생하면 화면에 '불러오기를 실패하였습니다.'라는 메시지를 표시한다.

 

JavaScript (부분)                                                                                                                                               main.js

// XHR 생성
const req = new XMLHttpRequest();
// 데이터 종류 설정
req.responseType = 'blob';

// 불러오기 실패 시 이벤트
req.addEventListener('abort', (event) => {
  // 화면에 표시
  document.querySelector('#log').textContent = '불러오기 작업을 실패하였습니다.';
});

// 불러오기 완료시 이벤트
req.addEventListener('load', (event) => {
  ...생략...
});
// 파일 지정
req.open('GET', './sample.jpg');
// 불러오기 시작
req.send();
// 50% 확률
if (Math.random() > 0.5) {
  // 불러오기 작업 중단 설정
  req.abort();
}

 

 

 

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김