[책] 자바스크립트 코드 레시피 278 - 211일차

XMLHttpRequest로 작업 취소하기

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

구문

abort()

설명

abort() 를 사용하면 XMLHttpRequest 객체 인스턴스가 진행 중인 데이터 송수신 작업을 중단할 수 있으며, 이때 발생하는 이벤트는 load가 아닌 abort 이벤트입니다. 다음 샘플은 50%의 확률로 작업이 실패하도록 의도한 코드입니다. 몇 번의 작업 후 실패가 발생하면 화면에 '불러오기를 실패하였습니다.' 라는 메시지를 표시합니다.

실습

const btn = document.querySelector('button'); // 버튼 요소 가져오기
btn.addEventListener('click', () => { // 버튼 클릭 시
  const req = new XMLHttpRequest(); // XHR 생성
  req.responseType = 'blob'; // 데이터 종류 설정
  req.addEventListener('abort', (event) => { // 불러오기 실패 시 이벤트
    console.log(event);
    document.querySelector('#log').textContent = '불러오기 작업을 실패하였습니다.'; // 화면에 표시
  });
  req.addEventListener('load', (event) => { // 불러오기 완료 시 이벤트
    const data = event.target.response; // response 가져오기
    const source = URL.createObjectURL(data); // 이미지 데이터 변환
    const image = new Image(); // 이미지 생성
    image.src = source;
    document.querySelector('#log').appendChild(image); // 텍스트 출력
  });
  req.open('GET', './211_sample.jpg'); // 파일 지정
  req.send(); // 불러오기 시작
  if (Math.random() > 0.5) { // 50% 확률
    req.abort(); // 불러오기 작업 중단 설정
  }
});