_Async/Await_

자바스크립트에서 async/await는 뭘까?

async/await는?

Promise 기반으로 동작하지만, then/catch/finally 와 같은 프로미스 후속 처리 메서드에 콜백 함수를 전달하여

비동기 처리 결과를 후속 처리할 필요 없이 마치 동기 처리처럼 프로미스를 사용할 수 있다.

결과적으로 Promise를 더 쉽게 다룰 수 있게 해 준다.

async/await을 사용하면 비동기 함수들을 마치 동기 함수처럼 작성하여 동작할 수 있게 해 준다.

function getData(){

/*

 비동기 함수

 */

}

// 프로미스

new Promise((resolve, reject) => {

const result = getData();

if ( /* 비동기 작업 수행 성공 */) {

resolve(result);

} else {

reject(result);

}

})


// async/await

async function getData() {

await /* 비동기 함수 */

}

Async

async 함수는 async 키워드를 사용해 정의하고, 언제나 프로미스를 반환한다.

Await

await 키워드는 프로미스가 settled 상태가 될 때까지 대기하다가 settled 상태가 되면 프로미스가 resolve 한 처리 결과를 반환한다.

참고 링크

- async/await (https://learnjs.vlpt.us/async/02-async-await.html)

자바스크립트에서 사용되는 Promise는 무엇일까?

콜백

콜백 함수는 다른 함수에 인자로 전달되는 함수로

어떤 함수의 동작에서 이벤트가 발생하였을 때, 혹은 특정 시점에 도달했을 때 호출하는 함수이다.

아래 예시는 정말 러프하게 이해할 수 있게끔만 적어놓은 함수이다. 단순한 구조라면 콜백 구조가 깊지 않지만, 복잡도가 높아짐에 따라 콜백 함수가 중첩되고 그 깊이가 엄청나게 깊어지는 것을 콜백 지옥이라 한다.

function getData(){

  /*

  비동기 함수

  */

}


getData().then(

  // 완료 되었을 때

).then().then().catch().finally()

Promise

Promise 객체는 ES6에서 추가된 개념으로, 비동기 작업이 작업 완료 후 미래의 완료 혹은 실패 결과를 나타낸다.

기존의 방식으로는 작성하게 된다면 콜백 지옥에 빠지게 된다.

또한 Promise 객체는는 비동기 함수들을 병렬로 수행할 수 있도록 하며 .all() 메서드와 .allSettled() 메서드를 프로퍼티로 가진다.

_출처: https://adrianalonso.es/desarrollo-web/apis/trabajando-con-promises-pagination-promise-chain/_

Promise는 비동기 작업을 수행하고 그 작업의 성공 혹은 실패 함수를 호출할 수 있다.

function getData(){

  /*

  비동기 함수

  */

}


new Promise((resolve, reject) => {

  const result = getData();


  if ( /* 비동기 작업 수행 성공 */) {

    resolve(result);

  } else {

    reject(result);

  }

})

Promise의 상태(State)

Promise 객체의 상태 정보는 세가지가 있다.

• pending: 비동기 처리가 아직 수행되지 않은 상태 - Promise 객체가 생성된 직후 기본 상태
• fulfilled: 비동기 처리가 수행된 상태 (성공) -> resolve 함수 호출
• rejected: 비동기 처리가 수행된 상태 (실패) -> reject 함수 호출

정리

• Promise는 콜백 지옥에 빠지는 비동기 처리를 간결하게 처리할 수 있게 표현
• 상태에는 pending, fulfilled, rejected 가 있다.
• 실행 결과에 따라 실패 시 reject, 성공 시 resolve 함수를 호출할 수 있다.

참고 링크

- Promise (https://learnjs.vlpt.us/async/01-promise.html)