프로미스 패턴 없이 프로미스 만들기. async 와 await

async

• 함수 앞에 붙이면, 함수 실행후 promise 오브젝트가 남는다. 
• 화살표 함수 앞에다 붙일수도 있다.
• 프로미스 패턴을 만들지 않고도 프로미스를 사용할 수 있다. 
•     👉 async 함수앞에 사용하면 언제나 프라미스를 반환한다.
•     👉 프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 이행된 프라미스를 반환한다.
• 프로미스 패턴과는 다르게 함수를 실행시켜 주어야 작동한다. 
• 단점 __ 성공했을 경우만 가능. 실패한 경우에는 강제로 설정하는 방법이 있기는 함.

  async function plue(){
    return (10<<4 )  + '입니다';
  }

  plue().then(function(result){
    console.log(result)  //160입니다
  })

 

 

await

• async function 안에서만 사용이 가능하다. 
• await가 걸려있는 코드가 해결될 때 까지 기다렷다가 실행한다.  (원래 오래걸리는건 따로 빼놓고 다른거 먼저 실행함. )
• 한마디로 기다려! 의미임.
•       👉 처리되길 기다리는 동안 엔진이 다른 일(다른 스크립트를 실행, 이벤트 처리 등)을 할 수 있기 때문에,
•       👉 CPU 리소스 낭비하지 않음.
• await는 실패의 경우 에러를 내뿜으며 코드를 멈춘다. 

그래서 아래의 형식을 사용하는데, 이 안에다 await를 넣어줄 수 있다. 

try {'이거 실행 해보고'} catch {'안되면 이거 실행해줘'}

 

 

예시를 봐보자.

async function ex(){
    let promi = new Promise(function(resolve, reject){
        let problem = 2+4;
        resolve(problem)
        // reject(problem)
    });
    try{
        let result = await promi;
        console.log(result)  //6
    }catch{
        console.log('catch문 실행됨')
    }

    //await 사용하기 전의 방법
    //promi.then(function(){
    //   console.log('야야')
    //});
}
ex()

이런식으로 try 문과 catch 문을 이용해서 성공.실패 처리에 대한걸 적어둘 수 있다. 

 

 

 

또다른 예시. (그냥 함수에 async 를 붙여 프로미스를 반환하는데, 그 함수 내부에 프로미스 패턴이 존재)

async function test(){
    let promi = new Promise(function(resolve, reject){
        let btn = document.getElementById('btn');
        btn.addEventListener('click', function(){
            return resolve('버튼 눌럿따')
        })
	})
    let result = await promi;
    console.log(result);   //버튼을 누르면 콘솔창에 '버튼 눌럿따' 나온다.
}
test()