_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)

_Async/Await_

비동기란 무엇일까?

비동기

비동기는 하나의 동작이 완료되는 것을 기다리지 않고, 동시에 다른 작업을 처리하는 방식이다.

자바스크립트는 싱글 스레드 언어이기 때문에 필수 불가결적으로 비동기 함수를 선택하게 되었다.

하나의 스레드를 가지고 다른 작업이 마칠때까지 대기해야 한다면, 작업이 너무나도 느려지기 때문이다.

비동기 처리를 지원하는 방식으로는 Promise와 async/await이 있다.

예시

비동기 함수는 에어프라이어에 음식 넣고 돌린 후, 다른 재료를 손질하면서 틈틈이 에어프라이어를 체크하는 것과 유사하다.

에어프라이어가 음식을 조리하는 것이 완료될 때 까지 기다리는 것이 아닌, 동시에 다른 작업을 진행하는 것이다.

동기

동기는 하나의 동작이 완료된 후에 다음 동작으로 실행하는 순차적 방식이다.

개인적인 헷갈림 정리

처음에 비동기와 동기의 개념을 반대로 생각하고 있었다.

오히려 동기를 "병렬 처리"와 개념적으로 혼동하고 있었던 것 같다.

동기는 "순차적", 비동기는 "동시에"라고 외워야 겠다.

참고 링크

- 주니어 웹 개발자가 알아야 할 "비동기 통신" (https://yozm.wishket.com/magazine/detail/1982/)