JS 학습정리

함수를 실행하면서 대기시간이 걸리는 함수가 있어서 대기시간동안 로딩창을 깔끔하게 보여주려고 하면서 다음과 같은 정보를 알았다.
async를 함수에 붙여서 비동기화 한다는 것은 알고있었지만 Promise를 생성한다는 것은 몰랐다. Promise객체를 생성한다는 말은 미래의 완료 또는 실패와 그 결과 값을 저장하는 객체가 생긴다는 말인데.
Promise의 상태는

대기(pending): 이행하거나 거부되지 않은 초기 상태.

이행(fulfilled): 연산이 성공적으로 완료됨.

거부(rejected): 연산이 실패함.

을 가진다.

정확하게는

pending 아직 약속을 수행중인 상태

fulfilled 약속이 지켜진 상태

rejected 약속이 못 지켜진 상태

settled 약속이 지켜졌든 안지켜졌든 결론난 상태

를 가진다.

만약

var _promise = function (param) {

	return new Promise(function (resolve, reject) {

		// 비동기를 표현하기 위해 setTimeout 함수를 사용 
		window.setTimeout(function () {

			// 파라메터가 참이면, 
			if (param) {

				// 해결됨 
				resolve("해결 완료");
			}

			// 파라메터가 거짓이면, 
			else {

				// 실패 
				reject(Error("실패!!"));
			}
		}, 3000);
	});
};

를 가진다면 resolve와 reject를 파라메터로 받고있다. 여기서 new Promise가 생성되는 직후부터 위 2가지 파라메터가 호출되기 전까지가 pending 상태라 볼 수 있다. 여기서 비동기 작업을 마치고나서 성공은 resolve, 실패는 reject를 호출하는 것이 promise의 주요 개념이다.

이후에

_promise(true)
.then(function (text) {
	// 성공시
	console.log(text);
}, function (error) {
	// 실패시 
	console.error(error);
});

가 선언된다면 자연스럽게 Promise 객체가 리턴되고 정상적 종료 비정상적 종료에 따라서 콘솔을 찍어준다.

또한

.catch(function () { 
		window.alert('체이닝 중간에 에러가!!');
	})

를 선언한다면 오류가 발생했을때 처리과정을 만들 수 있다.

Promise.all([promise1, promise2]).then(function (values) {
	console.log("모두 완료됨", values);
});

처럼 만약 then()으로 이어진 Promise가 있다면 위처럼 Promise.all을 통해서 모두 실행한다.