Promise 대신 async/await

Javascript

by 모모87 2021. 9. 24. 10:14

Promise가 어렵다면 그보다 훨씬 쉽게 쓸 수 있는 ES8 문법이 있습니다.

async, await이라는 키워드인데 각각 Promise와 then을 매우 쉽게 만들어주는 문법입니다.

async 키워드를 쓰면 Promise 오브젝트가 절로 생성됩니다.

말그대로입니다. new Promise() 어쩌구 하실 필요가 없습니다.

근데 이 키워드는 function 선언 앞에만 붙일 수 있습니다.

* async/await 기본활용

async function 더하기(콜백){
	1+1;	
// return Promise.reject(’실패임’)
}
더하기().then(function(결과){
    console.log(’성공이에요.’)
}



async function 더하기(){
	var 프로미스 = new Promise(function(성공, 실패){
 		var 힘든연산 = 1+1;		
                성공(100);
        });

	//프로미스.then(function(){
 	//	console.log(’성공했어요’)
        //});

       try {
		var 결과 = await 프로미스; //then과 같다.
    	    console.log(결과);
	} catch{
		console.log(‘프로미스 연산이 잘 안되었군요’)
	}
}

* 버튼을 누르고 성공시 "성공했어요" 로그찍힘

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="button">버튼</button>
    <script>
        async function 더하기() {
            var 프로미스 = new Promise(function (성공, 실패) {
                document.getElementById('button').addEventListener('click',
                    function () {
                        성공('성공했어요.');
                    })
            });
            var 결과 = await 프로미스;
            console.log(결과);
        }
        더하기();
    </script>

</body>

</html>

'Javascript' 카테고리의 다른 글

Symbol 자료형 (나만 몰래 확인하고 자하는 데이터 저장법) (0)	2021.09.24
for in / for of 반복문과 enumerable, iterable 속성 (0)	2021.09.24
class, extends, getter, setter 연습문제 (0)	2021.09.13
Getter, Setter 사용법 (0)	2021.09.13
객체지향 class를 복사하는 extends / super (0)	2021.09.07