<JAVA Script> Promise 고급 예제

📌 1. Promise 의 동작 방식을 이용하여 예제문제 풀기 

 

다음의 작은 예제는 Promise의 동작 방식을 보여준다.  testPromise() 함수는 <button>을 클릭할 때마다 호출되며, window.setTimeout()을 사용해 1~3초의 무작위 간격 이후 프로미스 횟수(1부터 시작하는 숫자)로 이행하는 프로미스를 생성한다. Promise() 생성자는 프로미스를 만드는 데 쓰인다.

프로미스 이행은 p1.then()을 사용하는 이행 콜백 세트를 통해 단순히 로그에 남는다. 약간의 로그를 통해, 함수의 동기 부분이 비동기적 프로미스의 완료와 어떻게 분리되어 있는지 확인할 수 있다.  짧은 시간 동안 버튼을 여러 번 클릭하면 다른 프로미스가 차례로 이행되는 것을 볼 수 있다. 

 

* 구문

 

button 요소: 버튼을 클릭하면 프로미스를 생성하는 이벤트를 트리거한다. (동작이나 이벤트 발생)

div 요소: 프로미스의 결과를 로그로 출력합니다.

 

* 예제 1

 

 

 

이 코드는 브라우저에서 Promise를 사용하여 비동기적인 작업을 시뮬레이션하는 예제이다. 코드를 통해 프로미스의 생성과 이행/거부를 다루는 방법을 알 수 있다. 

 

* 코드 동작 설명:

1. promiseCount: 전역 변수로, 현재까지 생성된 프로미스의 개수를 추적한다. 

2. testPromise() 함수: 버튼 클릭 이벤트에 연결되어 있으며, 프로미스 생성 및 처리를 수행한다. 

3.p1: 새로운 프로미스를 생성합니다. 이 프로미스는 랜덤한 시간(1~3초) 후에 이행되는 것을 시뮬레이션한다.

4.p1.then(): 프로미스가 이행될 때 실행되는 콜백 함수를 정의한다. 프로미스가 이행될 때마다 로그에 이행된 값이 추가된다. 

5.p1.catch(): 프로미스가 거부될 때 실행되는 콜백 함수를 정의한다. 현재 코드에서는 거부되는 상황을 시뮬레이션하지 않는다. 

6. 버튼 클릭 이벤트: 버튼이 클릭되면 testPromise() 함수가 호출된다. 

7. 마지막 부분: 브라우저가 Promise를 지원하는지 확인하고, 지원하는 경우 버튼 클릭 이벤트를 활성화하고, 그렇지 않은 경우 적절한 메시지를 표시한다. 

 

주의사항:

- 이 코드는 브라우저 환경에서 동작하는 예제이므로, 브라우저에서 직접 실행해야 한다. 

- Promise는 ECMAScript 6부터 도입된 기능으로, 모든 브라우저에서 지원되지 않을 수 있다. 따라서 코드를 실행하기 전에 브라우저 호환성을 고려해야 한다.