[2019.03.06] 비동기 처리방식 Promise와 Async await

비동기적 통신방식인 AJAX가 있는데, 그것 말고 비동기적 처리 방식인 Promise가 따로 있다. 사실 둘의 무슨 차이인지는 모르겠다.

AJAX는 통신이고, Promise는 함수처리를 비동기적으로 하는 것일까..? 

우선 Promise가 향후에 많이 쓰여질 방식이라고 하는 것 같아, 사용방식에 대해 공부를 해봤다. 

# Promise 사용법

기본적인 사용 예제

function delayP(sec){
    return new Promise((resolve, reject)=>{
        setTimeOut(()=>{
            resolve('run!');
        }, sec * 1000);
    }
}
 
let finalVal = delayP(1).then((result)=>{
    console.log(result);
    return finalResult;
});
 

우선 9줄에 있는 delayp를 호출하는 부분부터 시작해보면, delayP에 1이라는 값을 넘긴다. 그 값을 받고, new promise라는 객체를 생성하여 반환한다. 그러나 해당 Promise에는 resolve, reject가 있다.

resolve는 비동기 처리에 성공했을 시, reject는 실패했을 시 사용되는 콜백함수 값이다. 2줄에서 반환된 new Promise 객체는 9줄로 이동한다.

그러면 Promise 객체에 들어있는 then, 즉 promise.then이 실행된다... 그리고 Promise의 안에 있던 resolve에 함수로 넣은 것이 9줄에 result로 이동한다...

그리고 11줄에 finalResult는 delayp와 then이 전부 처리되고 마지막 반환되는 값으로 9줄의 finalVal 변수에 대입된다.....

나도 쓰면서 무슨 말인지 모르겠다.. 그냥 쓰는 법을 외워야겠다... 구조를 이해하려 했는데 좀 어렵다...ㅜㅜ

function delayP(sec){
    return new Promise((resolve, reject)=>{
        setTimeOut(()=>{
            resolve('run!');
        }, sec * 1000);
    }
}
 
let finalVal = delayP(1).then((result)=>{
    console.log(result); //1초 뒤에 출력
    return delayP(1);
}).then((result)=>{
    console.log(result); // 2초 뒤에 출력
    return delayp(1);
}).then((result)=>{
    console.log(result); // 3초 뒤에 출력
    return delayp(1);
})
 

참고로 위처럼 비동기 방식을 순차적으로 처리할 수 있다. delayP().then이 반환하는 값은 결국 then 내의 콜백함수의 return값이므로 바로 .then, .then하여 순차적으로 처리할 수 있다.

async / await

비동기 처리방식이 한가지 더 있다. async / await 이 둘을 한 쌍으로 이용하여 사용한다.

async function myAsync(){
    return 'Hello Async~';
}
 
myAsync().then((result)=>{
    console.log(result); // 'Hello Async~'
});
 

저렇게 function 앞에 async라는 키워드를 붙여서 사용한다. 그러면 호출하는 부분에서 then의 첫번째 콜백함수의 result값이 async 함수의 반환값으로 사용한다.

function delayP(sec){
  return new Promise((resove, reject)=>{
    setTimeOut(()=>{
      resolve('Good~!');
    }, sec * 1000);
  });
}
 
async function myAsync(){
  delayP(1).then((result)=>{
    console.log(result);
  }
  return 'ok?';  
}
 
myAsync().then((result)=>{
  console.log(result);
});
 
 

async 함수 내에서는 비동기 방식으로 처리되기 때문에, 위의 코드를 실행하면 ,myAsync의 delayP()의 함수를 처리 후 return 'ok?'를 반환하는 것이 아니라, delayP는 1초를 기다리는 중, 'ok?'라는 문자열을 16줄의 then 안의 result로 반환을 하게된다. 

그러므로 결과값은 'ok?' 'Good~!'이다.

그러나 비동기 방식 중 순차적으로 처리해야할 상황이 생길 시,  해당 함수호출 부분에 await키워드를 붙이면 해당 함수가 우선적으로 처리하고 그 뒤의 함수들이 처리되게 된다.

function delayP(sec){
  return new Promise((resove, reject)=>{
    setTimeOut(()=>{
      resolve('Good~!');
    }, sec * 1000);
  });
}
 
async function myAsync(){
 await delayP(1).then((result)=>{
    console.log(result);
  }
  return 'ok?';  
}
 
myAsync().then((result)=>{
  console.log(result);
});
 
 

아까 위 코드와의 차이점은 10줄에 await를 붙인것이다. 저렇게 await를 붙이면 delayP(1)의 함수가 완료될 때까지 그 밑의 작업들은 기다려야 한다.

그러므로 위 코드의 결과값은 'Good~!' 'ok?'가 된다.

너무 이해하기가 어렵다...ㅜㅜ 그래도 뭔가 정리를 하니까 외워지기는 하는데, 아직 돌아가는 방식에 대한 이해는 좀 더 봐바야 할 것 같다.

무엇보다 Promise와 async await 코드를 계속 보니까 arrow Function 작성방식이 많이 적응된것같다.ㅎㅎ