[JS] XMLHttpRequest return처리 (Callback)

 

XMLHttpRequest return처리 undefined 현상

function requestData() {
  let request = {"text": "안녕하세요"};
  
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/data.json');
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) { 
          if (xhr.status == 200) {
            //응답결과
            var data = xhr.responseText;
            //반환
            return data;
          } else {
             console.error(xhr.status); 
          }
    }
  };
 xhr.send(JSON.stringify(request)); 
}

let result = requestData(); //반환값 받음
console.log(result); //undefine

 

맨 아래 변수 result 의 값은 undefined로 뜹니다. 이유는 바로 Asynchronous(비동기) 이기때문입니다.

동기 방식은 코드의 응답 결과를 받을 때 까지 기다리는 것이고,

비동기 방식은 코드의 응답 결과를 기다리지 않고 다음 동작을 먼저 수행합니다. 

그러므로 URL 로 요청을 보내고, 응답을 기다려주지 않고 return result 가 실행될 것입니다.
조금 더 간단하게 설명하자면, 요청에 대한 응답결과를 받기전에 requestData 함수가 return된 것입니다.

 

이 문제를 해결하는 방법은 아래와 같습니다.

 

XMLHttpRequest return 해결방법

함수가 callback을 받을 수 있게 코드를 작성하기

function requestData(callback) {
  let request = {"text": "안녕하세요"};
  
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/data.json');
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) { 
          if (xhr.status == 200) {
            //응답결과
            var data = xhr.responseText;
            //callback
            callback(data);
          } else {
             console.error(xhr.status); 
          }
    }
  };
 xhr.send(JSON.stringify(request)); 
}

requestData(function(data) {
    console.log(data); //리턴된 응답결과 확인가능
});

위 방식은 requestData 라는 함수를 호출하는데 인자로 익명함수를 넣는 것입니다.

requestData(function(data) {
    console.log(data); //리턴된 응답결과 확인가능
});

requestData 호출 문에서 인자로 익명함수를 정의하였으므로,

중간에 callback 이라는 함수 호출문 형식으로 로직을 짤 수 있습니다.

결과적으로 callback 의 함수 호출문의 인자로 응답 결과를 넣게 되고

맨 아래 requestData 함수 호출문에 인자로 들어있는 함수의 파라미터 값이 될 것입니다.

 

 

 

참고: https://velog.io/@sms8377/TIL-228-XMLHttpRequest-%EB%B0%98%ED%99%98-%EA%B0%92-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0Callback

[TIL 2/28] XMLHttpRequest 반환 값 사용하기(Callback)

콜백함수 설명 추천 포스팅 : https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%BD%9C%EB%B0%B1-%ED%95%A8%EC%88%98

📚 콜백 함수(Callback) 개념 & 응용 - 완벽 정리