[JavaScript] async , await 키워드를 이용한 비동기 , 동기 메서드 호출 예제

image를 동기화 , 비동기화로 로드하는 것을 테스트 해보았습니다.

   async function drawImage() {

         let imgobj = document.createElement("img");

         // promise 선언
         let imgPromise = new Promise( (resolve , reject) => {
             resolve();
         });
         
         // resolve가 호출 될때 에는 , then() 메서드가 실행 
         // , reject 일시에는 catch() 
         imgPromise.then(() => {
             imgobj.onload = () => {
                
                
				 let cur_img_width = this.naturalWidth;
                 let cur_img_height = this.naturalHeight;
             
             };
         });
        
        
        console.log("Image Load Start");
         console.log(new Date().getTime());

         imgobj.src = "${pageContext.request.contextPath}/imageAction.do?process=testImageDownload";
         
         // await 키워드로 기다림 
         await imgPromise ; 

         console.log(new Date().getTime());
         console.log("Image Load End ");
        
}

        
        
             
// 비동기 함수 호출
drawImage();

 

await을 설정 하였을때 

await을 설정하지 않았을때