[JavaScript] Promise와 Ajax를 활용한 비동기 통신

Ajax를 배우면서 Promise 를 같이 활용하여 비동기 통신을 하는 방법도 있다고 한다.

이해 하는것이 힘들기 때문에 포스팅으로 작성하며 정리해 보려고 한다.

 

❓ Ajax란

웹 페이지의 내용이 갱신될 때 전체 페이지가 새롭게 생성되어 바뀌는 것이 아닌 서버로 부터 응답 데이터를 받아와 페이지의 일부분만 갱신할 수 있도록 해주는 비동기 프로그래밍 기법이다.

 

 

❓ Promise 란

비동기 처리를 실행 하고 처리가 끝난 후에 다음 처리를 실행하기 위한 기능을 제공한다.

 

 

🤔 왜 Ajax와 promise를 같이 활용할까?

Ajax는 비동기적 처리이기 때문에 자바스크립트는 응답을 기다리지 않고 다음 코드를 실행한다.

이때 생길 수 있는 문제점은 Ajax를 통해 요청한 응답값이 언제 올지는 모른다는것이다.
응답이 오지도 않았는데 자바스크립트가 다음 코드들을 실행하여 

원치않는 페이지가 출력되는 등의 문제가 생길 수 있다.

그렇기 때문에 비동기적 처리의 실행 순서를 제어할 필요성이 생기는 것이고
이러한 제어를 할 수 있는 것이 promise이다.

ajax는 기본적으로 콜백을 사용하지만 promise는 then과 catch를 통해 더욱 직관적인 코드를 작성할 수 있다.

 

 

🔍 활용예제 살펴보기

 

1️⃣ promise 객체 생성

    let ajaxP = new Promise((resolve, reject)=>{
      let xhrObj = new XMLHttpRequest();
    }) //Promise​

👉 promise 객체를 생성한 뒤 그 안에 서버와 비동기 통신을 하기위한 XMLHttpRequest 객체를 생성한다.

 

 

 

2️⃣ XMLHttpRequest 요청 초기화

    let ajaxP = new Promise((resolve, reject)=>{
      let xhrObj = new XMLHttpRequest();
      
      let url='open할 문서';
      xhrObj.open('Get', url);
    }) //Promise

👉 open함수를 통해 메서드는 데이터를 가져오기 위해 Get으로 설정하고
      요청을 보낼 서버의 url을 인자로 넣는다.

 

 

 

3️⃣ 응답값 처리

    let ajaxP = new Promise((resolve, reject)=>{
      let xhrObj = new XMLHttpRequest();
      
      let url='ex05_01ajaxForm.html'; //ex01_Error.html
      xhrObj.open('Get', url);
      
      xhrObj.onload= ()=>{
        if (xhrObj.status==200) resolve(xhrObj.response);
        else reject(xhrObj.status); 
      } //onload
      
    }) //Promise

👉 요청을 보낼 url의 문서가 로딩이 완료되면 함수 실행
      만약 응답에 성공할 경우 resolve함수를 실행하고 인자로 응답값(response)을 전달한다.
      응답에 실패할 경우 reject함수를 실행 하고 객체의 상태값(status)을 전달

 

 

 

4️⃣ 요청을 실행

    let ajaxP = new Promise((resolve, reject)=>{
      let xhrObj = new XMLHttpRequest();
      
      let url='ex05_01ajaxForm.html'; //ex01_Error.html
      xhrObj.open('Get', url);
      
      xhrObj.onload= ()=>{
        if (xhrObj.status==200) resolve(xhrObj.response);
        else reject(xhrObj.status); 
      } //onload
      
 	  xhrObj.send(null);
    }) //Promise

👉 send 함수를 통하여 요청을 실행한다.

 

 

 

5️⃣ then 과 catch

then( 성공 콜백함수 , 실패 콜백함수 )

ajax.then(
	(response) => {
    	alert("성공");
    }.then((response)=>{
    	document.getElementById("출력할 블럭").innerText = response; 
    }).catch((error)=>{
    	alert("실패");
        document.getElementById("출력할 블럭").innerText = error;
    }).finally(()=>{
    	alert("끝")
    })
)

👉 성공시 then의 첫번째 인자 콜백함수 실행 -> 문서 출력
      실패시 then의 두번째 인자 콜백함수 실행 -> status 출력 (404)