[JS] Promise / async / await

콜백함수를 위해 만들어진 Promise

👩‍🎓 프로미스란?
함수가 실행했을때 성공/실패에 따라 다음 동작을 설정하는 기계라고 생각하면 됨.

📝 예시

var promise = new Promise(function(resolve,reject){ 
 var sum = 1+1
 resolve(연산) 
 //꼭 성공 실패를 설정해줘야함
 //성공시 then에 연산이라는 파라미터를 전송
});

promise.then(function(result){ //성공시 실행

}).catch(function(){ //실패시 실행

});

※ 성공/실패 판정 전에는 pending 이라고 나옴 (판정대기상태)

📝 더 쉽게

var 성공실패판정기 = new Promise(function(성공,실패){ 
 var 일더하기일하기 = 1+1
 성공(연산)
});

promise.then(function(더한결과){ //성공시 실행
console.log(더한결과)
}).catch(function(실패결과){ //실패시 실행
 console.log("실패했어요")
});

📖 이게 활용된 라이브러리가 : ajax와 axios

async

👩‍🎓 Promise 만들기 귀찮을 때 사용하는 ES8문법임

📝 예시

async function 더하기(){
  1 + 1 
}

더하기().then(function(결과){
  console.log(결과,'더하기 성공했어요')
});

async 문법은 함수에만 붙일 수 있는데 이걸 붙이면 자동으로 함수를 프로미스 함수로 바꿔줌

단, async문법은 성공시에만 실행 실패시 멈춘다는 단점을 가지고 있음.

await

👩‍🎓 Promise 성공시 then 대신 사용하고 프로미스가 다 될 때 까지 기다려주는 문법

📝 예시

async function 3초있다보내기(){
  var 보내기 = new Promise((성공, 실패)=>{
    setTimeout(function(){
      성공("success")
    },3000)
  });
  var 받기 = await 보내기;
    console.log(받기);
}

3초있다보내기()

1. 보내기 Promise에서 성공한 결과를 변수 받기에 연결시킬려고 함

2. 보내기에서 결과가 오기까지는 3초의시간이 걸림

3. 하지만 console은 3초의 시간을 기다리지 않고 보내기와 받기를 연결시키기 때문에
   콘솔에 success대신 pending (대기상태)가 찍히게 됨

4. 그렇기에 보내기의 3초가 다 흐른 후 받기에 연결시켜주세요 라고 요청하는것이 await