Promise, Async Await에 대한 고찰

# Promise가 무엇인가? 

Promise가 도입되기 전에는 자바스크립트에서는 비동기 함수를 처리 할 경우 callback함수를 사용하여

비동기함수를 처리하였다.

하지만 코드가 복잡할 경우 callback hell(콜백지옥)에 빠지게 되므로 가독성 및 코드가 복잡해지기 쉽다.

이런 콜백헬을 해결하기위해 ECMA Script2015(ES6)에서 부터 Promise가 도입되었다.

 

프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다. 다만 최종 결과를 반환하지는 않고, 대신 

프로미스를 반환해서 미래의 어떤 시점에 특정형태의 결과를 제공합니다.

프로미스 객체란 일종의 약속이다. 

예를 들어, 

async 함수명(id): Promise<Task>{ 

// 처리

// const task: Task = await db.getById(id) 

return task

} // 해당 함수는 비동기로 처리되며, 미래 어떤 시점의 Task 형태의 결과값을 제공할 것이다라는 것을 의미 

 

(ex)

  let anyPromise= new Promise((resolve, reject) => {

    // 작업 수행

    resolve('go away callback-hell'); // 정상 수행시 값과 함께 제공

    // reject('occur error');             // 비정상 수행시 에러 발생

  });

 

  console.log(anyPromise)// Promise {<resolved>: "go way callback-hell"} 

 

  // 프로미스를 반환함!

   anyPromise.then((res) => { 

    console.log(res, 'res')// 'go away callback-hell' // then()메소드를 사용하여 

    anyPromise 변수에 있는 resolve값을 사용       

  })

 

(ex2)

let getById = new Promise<Task>((resolve, reject) => {

    // 작업 수행

    resolve(newTask); // 정상 수행시 값과 함께 제공

    // reject('occur error');             // 비정상 수행시 에러 발생

  });

getById.then((task) => {

console.log(task)

})

 

- new Promise를 이용하여 Promise객체를 만들고 첫번째 파라미터로 오직 하나(resolve 함수)의 callback함수를 사용할 수 있다.

- callback 함수 안 파라미터로 resolve, reject를 넣을 수 있다.

- callback 함수 안 정상적으로 수행하고 모든것이 진행되면 resolve를 호출하고 아니라면 reject를 사용하여 처리해주면 된다.

- 예제에서 보듯이 프로미스를 반환해서 추후 필요시 사용하면 된다.

- 사용법은 Promise.prototype에 있는 then() 메소드를 사용하면된다.

 

예제대로 코드를 짜고 Promise를 이용한다면 나중에 코드를 짜다가 필요할때마다 anyPromise에 있는 값을 이용하여 코딩을 할수 있는 장점이 있다.

 

- then()는 프로미스 객체에서만 사용 가능한 메소드이고 비동기방식이다.(Promise.prototye.then())

-. Promise가 해결(resolve)되었거나 거부(reject)될 때 호출합니다.

-. 두 가지 함수를 매개변수로 사용됨(ex) promise1.then((success) =>{//정상동작 처리부분}, (fail) =>{에처처리부분})

-. then()은 해당 Promise 객체의 resolve 값을 전달 받고, catch()는 해당 Promise 객체의 reject 값을 전달 받는다.

 

# Promise를 처리하는 두가지 방식

1. then(){(res)=>{~}  }.catch(){(err)=>{ ~ }  } 로 처리하기

=> 일반적

1. then() 함수에서 모두 처리하기, ","로 구분

promise.then((successMessages) => {console.log(successMessages)}, (errorMessages) => {console.log(errorMessages)});

 

- Promise는 이벤트의 비동기 처리에 사용된다.(콜백헬 해결)

- http 통신할때 주로 사용됨

 

# 간단한 예제로 살펴보는 async, await의 동작원리

const value = Promise.resolve('test변수');

 

async function myFunc() {

  console.log('async 함수 내부 첫번째 줄'); 

  const res = await value;

  console.log(res);  // 4  

}

 

console.log('함수 실행 전'); //1

myFunc();                       //2

console.log('함수 실행 후'); //3

 

----------------------------------------

(출력)

함수 실행 전

async 함수 내부 첫번째 줄

함수 실행 후

test변수

 

-> 일단 async 함수는 비동기로 실행되지만, async 함수 내부에서, await를 사용할 경우, async 내부에서는 동기적으로 진행된다.

 

주의 사항

1. 함수 내부에서 await을 사용할경우 반드시 function 앞에 async라고 적어줘야 한다.

ex) async function great() {} 또는 화살표함수로 const great = async() => {};

2. await으로 오는 반환값은 Promise객체여만 한다.

3. async 함수 안 await 예약어는 반환값 Promise가 올때까지 기다렸다가 반환되면 그 다음 로직을 실행한다.

 

추가적으로 Promise객체는 setTimeout이랑 마찬가지로 비동기방식이며 이벤트루프를 거친다.

 

function getItem() {

return new Promise((resolve, reject) => {

setTimeout(function() {

let bOK = false;

 

if(bOK) {

let result = { name: 'Dip2K', age: 44 };

resolve(result);

} else {

reject(null);

}

}, 2000);

 

 

 

});

}

 

async function get() {

try {

let result = await getItem();

console.log(result);

} catch(e) {

console.log(e);

}

 

}

 

console.log('1');

get();

 

출처

- https://velog.io/@wmc1415/Javascript-async-await-%EA%B0%84%EB%8B%A8%EC%A0%95%EB%A6%AC

- https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke