자바스크립트[기초] ES6 프로미스 Promise | promiseGet

프로미스란?

• 비동기 처리 상태와 처리 결과를 관리하는 객체 
• 프로미스는 주로 생성자 함수로 사용되지만 함수도 객체 이므로 메서드를 가질 수 있다.
• 프로미스는 프로미스 체이닝을 통해 비동기 처리 결과를 전달받아 후속 처리를 하기 때문에 비동기 처리를 위한 콜백 패턴에서 발생하던 콜백 헬이 발생하지 않는다 단, 프로미스도 콜백 패턴을 사용하기 때문에 콜백 함수를 사용하지 않는 것은 아니다

---

프로미스 장점

• 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있다. 

---

프로미스 생성

• Promise 생성자 함수를 new 연산자와 함께 호출하면 프로미스(Promise 객체)를 생성한다
• ES6에서 도입된 Promise는 호스트 객체가 아닌 ECMAScript 사양에 정의된 표준 빌트인 객체이다 
• Promise 생성자 함수는 비동기 처리를 수행할 콜백  함수를 인수로 전달받는데 이 콜백 함수는 resolve와 reject 함수를 인수로 전달받는다 
•  비동기 처리가 성공하면 콜백 함수의 인수로 전달받은 resolve 함수를 호출하고, 비동기 처리가 실패하면 reject 함수를 호출한다

// 프로미스 생성 
cosnt promise = new Promise((resolve, reject) => {
	// Promise 생성자 함수가 인수로 전달받은 콜백함수 내부에서 비동기 처리를 수행한다 
	if(/*비동기 처리 성공*/){
    	resolve();
    }else{ // 비동기 처리 실패
    	reject();
    }
};

 

---

프로미스 상태 정보 

프로미스의 상태정보	의미	상태 변경 조건
pending( 프로미스가 생성된 직후 기본 값)	비동기 처리가 아직 수행 되지 않은 상태	프로미스가 생성된 직후 기본 상태
fulfilled	비동기 처리가 수행된 상태(성공 시)	resolve 함수 호출
rejected	비동기 처리가 수행된 상태 (실패 시)	reject 함수 호출
fulfilled , rejected를 settled 상태라고 한다 (pending 상태가 아닌 비동기가 처리 수행된 상태 )
프로미스는 pending 상태에서 fulfilled , rejected(즉, settled 상태) 로 변화 할수 있지만 settled 상태에서는 다른 상태로 변화 불가능

 

프로미스 상태

※ 비동기 처리가 성공하면 프로미스는 pending 상태에서 fulfilled 상태로 변화하며 비동기 처리 결과 값인 1을 값으로 갖는다.

※ 비동기 처리가 실패하면 프로미스는 pending 상태에서 rejected  상태로 변화하며 비동기 처리 결과인 Error 객체를 값으로 갖는다 

// fulfilled 된 프로미스
const fulfilled = new Promise(resolve => resolve(1));

// rejected 된 프로미스
const rejected = new Promise((_, reject) => reject(new Error('error occurred')));

---

promiseGet 함수 

• 비동기 함수이다(비동기 처리 Promise 생성자 함수가 인자로 전달받은 콜백 함수 내부에서 수행한다)
• 함수 내부에서 프로미스를 생성하고 반환한다 
• 비동기 처리가 성공하면 처리 결과를 resolve 함수에 인자로 전달하면서 호출하고  비동기 처리가 실패하면 에러를 reject 함수에 인수로 전달하면서 호출한다 

// GET 요청을 위한 비동기 함수 
const promiseGet = url => {
	return new Promise((resolve, reject) => {
    	const xhr = new XMLHttpRequest();  // 객체 생성 
        xhr.open('GET' ,url);  // HTTP 요청 초기화
        xhr.send(); // 요청 전송
        
        xhr.onload = () => {  // 요청 성공시
        	if(xhr.status === 200 ) { // 응답 상태
             // 성공적으로 응답을 전달 받으면 resolve 함수를 호출 한다 
             resolve(JSON.parse(xhr.response)); // 서버의 응답을 JSON.parse 메소드를 이용해 문자열에서 객체로 변환 
            }else {
            // 에러 처리를 위해 reject 함수를 호출한다 
            reject(new Error(xhr.status));
            }
        };
    });
};