[JavaScript]XMLHttpRequest의 readyState 이해하기

XMLHttpRequest의 readyState란?

XMLHttpRequest의 readyState 프로퍼티는 XMLHttpRequest 객체의 상태를 보여줍니다. 

 

readyState 프로퍼티의 값이 변경될 때마다 readystatechange 이벤트가 실행되므로 해당 이벤트에서 readyState 프로퍼티의 값을 확인하는 것이 좋습니다.

값	상태	설명
0	UNSENT	XMLHttpRequest 객체는 생성되었지만 open() 메서드가 호출되지 않았습니다.
1	OPENED	open() 메서드가 호출되었습니다.
2	HEADERS_RECEIVED	send() 메서드가 호출되었습니다.
3	LOADING	응답을 로드 중입니다.
4	DONE	요청 완료되었습니다.

이번 포스팅은 readyState가 변경되는 과정을 보여줍니다.

---

UNSENT

XMLHttpRequest 객체는 생성되었지만 open() 메서드가 호출되지 않은 상태입니다.

 

초기 상태이므로 readystatechange 이벤트는 실행되지 않으며, readyState의 값은 0입니다.

const xhr = new XMLHttpRequest();
console.log(xhr.readyState); // 0

---

OPENED

open() 메서드가 호출되면 readyState의 상태가 OPENED로 변경됩니다.

const xhr = new XMLHttpRequest();
console.log(xhr.readyState); // 0

xhr.open("POST", "https://jsonplaceholder.typicode.com/posts");
console.log(xhr.readyState); // 1

---

HEADERS_RECEIVED & LOADING & DONE

send() 메서드가 호출되면 readyState의 상태가 HEADERS_RECEIVED로 변경되며 응답 데이터를 받을 준비가 되어있습니다.

 

send() 메서드를 호출하면 요청을 보냄과 동시에 데이터를 받으므로 redayState가 LOADING으로 변경됩니다.

 

모든 데이터를 응답받으면 readyState가 DONE로 변경됩니다.

const data = JSON.stringify({
  title: "foo",
  body: "bar",
  userId: 1
});

const xhr = new XMLHttpRequest();

xhr.onreadystatechange = () => {
  if (xhr.readyState === xhr.HEADERS_RECEIVED) {
    console.log("HEADERS_RECEIVED");
  } else if (xhr.readyState === xhr.LOADING) {
    console.log("LOADING");
  } else if (xhr.readyState === xhr.DONE) {
    console.log("DONE");
  }
};

xhr.open("POST", "https://jsonplaceholder.typicode.com/posts");
xhr.send(data);

[실행 결과]

HEADERS_RECEIVED
LOADING
DONE

---

abort() 메서드 호출

send() 메서드를 호출하면 readyState가 HEADERS_RECEIVED로 변경됩니다. 이때, abort() 메서드를 호출하면 요청이 중단되므로 readyState가 LOADING으로 변경되지 않고 DONE로 변경됩니다.

const data = JSON.stringify({
  title: "foo",
  body: "bar",
  userId: 1
});

const xhr = new XMLHttpRequest();

xhr.onreadystatechange = () => {
  if (xhr.readyState === xhr.HEADERS_RECEIVED) {
    console.log("HEADERS_RECEIVED");
    xhr.abort();
  } else if (xhr.readyState === xhr.LOADING) {
    console.log("LOADING");
  } else if (xhr.readyState === xhr.DONE) {
    console.log("DONE");
  }
};

xhr.open("POST", "https://jsonplaceholder.typicode.com/posts");
xhr.send(data);

[실행 결과]

HEADERS_RECEIVED
DONE

---

정상적인 응답인지 확인하는 방법

요청에 대한 모든 응답을 다운로드하였으며, 정상적인 응답인지 확인하려면 다음 예제처럼 readyState가 DONE인지 확인 후 status를 체크하는 것이 좋습니다.

xhr.onreadystatechange = () => {
  if (xhr.readyState === xhr.DONE)  {
    const status = xhr.status;
    if(status === 0 || (status >= 200 && status < 400)) {
      console.log('success...');
    } else {
      console.log('fail...');
    }
  }
};