[JavaScript] Promise 정리

📝 개념

자바스크립트에서 비동기 처리에 사용되는 객체

• 비동기 처리 : 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 실행할 수 있게 해주는 방식을 의미

자바스크립트에서 비동기 함수인 Web APIs를 실행할 때 실행한 코드가 완료될 때까지 대기하지 않고 바로 다음 코드를 실행할 수 있도록 해주고, 비동기 함수의 실행이 완료되면 then() 함수를 통해서 그 결과에 대한 코드를 실행할 수 있게 해줌

---

📌 객체 선언

• new 생성자 함수를 사용해서 생성

• 요청에 대한 응답이 성공적으로 오면 resolve() 함수에 결과를 전달하고, 응답에 실패하면 reject() 함수에 에러를 전달함

const promise = new Promise((resolve, reject) => {
	if (/* 처리 성공 */) {
		resolve("결과 데이터");
	} else {
		reject(new Error("에러"));
	}
});

---

📌 예제

function getDataPromise() {
	return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        
        xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1");
        xhr.setRequestHeader("content-type", "application/json");
        xhr.send();
        
        xhr.onload = () => {
          if (xhr.status === 200) {
            const res = JSON.parse(xhr.response);
            resolve(res);
          } else {
            console.error(xhr.status, xhr.statusText);
            reject(new Error(xhr.status));
          }
		}
	});
}

getDataPromise().then((res) => {
	console.log(res);
	console.log("다음 코드를 실행합니다.");
});

---