본문 바로가기
Javascript

JAVASCRIPT Promise

by titlejjk 2023. 5. 31.

프로그래밍에서 Promise는 비동기 작업을 처리하기 위한 개념이다.

Promise는 주로 JavaScript에서 주로 사용되며, 다른 프로그래밍 언어에서도 유사한 개념을 가지고 있을 수 있다.

Promise는 주로 네트워크 요청, 파일 로딩, 데이터베이스 작업 등과 같은 비동기 작업을 처리할 때 사용된다.

비동기 작업은 일반적으로 시간이 오래 걸리는 작업이거나 외부 자원에 의존하는 작업을 의미한다.

Promise를 사용하면 이러한 비동기 작업을 보다 효율적이고 간결하게 다룰 수 있다.

 

Promise객체는 세 가지 상태를 가질 수 있다.

 

  1. Pending(대기 중)
    비동기 작업이 아직 완료되지 않은 상태이다. Promise가 처음 생성되면 대기 중 상태입니다.
  2. Fulfilled(이행 됨)
    비동기 작업이 성공적으로 완료된 상태이다. 작업이 완료되면 이행상태로 전환된다. 이때 Promise는 결과 값을 가지게 된다.
  3. Rejected(거부됨)
    비동기 작업이 실패한 상태이다. 작업이 실패하면 거부 상태로 전환된다. 이때 Promise는 실패한 이유를 나타내는 오류 객체를 가지게 된다.

Promise는 비동기 작업을 처리하는 체이닝 메커니즘을 제공한다. 작업이 완료되면 then()메소드를 사용하여 성공 콜백 함수를 호출하고, catch()메소드를 사용하여 실패 콜백 함수를 호출할 수 있다. 또한, Promise.all()또는 Promise.race()와 같은 메소드를 사용하여 여러 Promise를 조작하고 병렬 실행할 수도 있다.

 

Promise를 사용하면 비동기 작업의 흐름을 보다 명확하고 예측 가능하게 관리할 수 있으며, 콜백 지옥(callback hell)과 같은 코드 구조의 복잡성을 줄일 수 있다.

<html>
<head>
<meta charset="UTF-8">
<title>/promise/test01.jsp</title>
</head>
<body>
	<h3>콜백 지옥이란 무엇인가?</h3>
    <script>
    	//가상의 주어진 작업을 처리하는 함수(주어진 작업을 처리하는데 random한 시간이 걸린다고 가정)
        function work(job, callback){
        	//0~5000사이의 랜덤한 숫자 얻어내기
            let ranTime = Math.random()*5000;
            
            setTimeout(()=>{
            	console.log(job + "을(를) 처리(수행) 했습니다.");
                callback(); //전달받은 함수를 호출해 준다.
            }, ranTime);
        }
        
        work("냉장고 문을 연다", function(){
        	work("코끼리를 냉장고에 넣는다", function(){
            	work("냉장고 문을 닫는다", function(){
                });
             });
        });
   </script>

랜덤한 시간에 처리된 console.log

위에 냉장고 문을 열어 코끼리를 넣는 작업의 코드는 가독성 보기 않좋을 뿐더러 나중에 코드에 문제 발생시 처리하기 어렵다.

그래서 아래의 예제를 보면

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/promise/test02.jsp</title>
</head>
<body>
	<h1>Promise 테스트</h1>
	<script>
    //1. Promise 객체를 생성해서 참조값을 p1에 담는다
    	let p1 = new Promise(function(resolev, reject{
        /*
        함수의 인자로 전달되는 resolve, reject는 함수이다.
        resolve는 작업을 완료 했을 때 호출
        reject는 작업이 실패 했을 때 호출
        resolve함수가 호출되면 .then() 안에 있는 함수가 자동호출
        reject함수가 호출되면 .catch() 안에 있는 함수가 자동호출
        */
        });
        p1.then(function(){
        	console.log("then 안에 있는 함수가 호출되었습니다.");
        });
        p1.catch(function(){
        	console.log("catch 안에 있는 함수가 호출되었습니다.");
        });
	</script>
</body>
</html>

'Javascript' 카테고리의 다른 글

JAVASCRIPT .setAttribute  (0) 2023.06.01
JAVASCRIPT Regular expresstion  (0) 2023.05.31
JAVASCRIPT PreventDefault()  (0) 2023.05.30
JAVASCRIPT Fetch()  (0) 2023.05.30
JAVASCRIPT Callback() 함수  (0) 2023.05.26

댓글