Javascript / 기초 / 비동기 프로그래밍(Asynchronous) : Async/await

 

앞서 비동기 함수를 처리하는 callback, Promise 방식에 대한 글을 작성하였다.

 

Javascript / 기초 / 비동기(Asynchronous), 콜백(callback), setTimeout

Javascript / 기초 / 비동기 프로그래밍(Asynchronous) : Promise

 

2개의 글을 완전히 이해해야지만, 아래의 async/await 문법을 이해할 수 있다.

 

 

---

 

1. Async/await 사용 이유

 

앞서 살펴본 예시에서는 비동기 함수들의 결과를 사용자가 원하는대로 출력하기 위해서 callback 함수를 중첩 형태로 처리하거나, Promise를 .then, .catch의 형태로 '이어서' 작성해주는 형태였다. Async/await는 사용자가 굳이 함수들을 '이어주는' 형태를 고민하지 않더라도 마치 동기함수처럼 비동기 함수들을 차례대로 실행하게 해주는 문법이다. 즉, 그냥 위에서 아래로 쭉 적어주어도 윗 줄의 비동기함수의 실행이 완료되고 나서야 아랫줄의 비동기함수가 실행되도록 해주는 문법이다.

 

 

 

---

 

 

2. Async/await 사용 문법

 

앞서 살펴본 Promise를 사용한 문법과 실행 구문을 비교해보자.

 

// 1. Promise 문법 사용
let printer = function (letters) {
  return new Promise((resolve, reject) => {
    setTimeout(
      () => {
        console.log(letters)
        resolve()
 reject(new Error("Request is failed"))
        },
      Math.floor(Math.random() * 100) + 1
     )
 })
}
let allPrinter3 = function() {
  printer("a")
  .then(() => {
    return printer("b")
  })
  .then(() => {
    return printer("c")
  })
  .catch((err) => {
    console.log(err);    
  })
}
 
allPrinter3()
 
 
// 2. Async/await 문법 사용
let printer = function (letters) {
  return new Promise((resolve, reject) => {
    setTimeout(
      () => {
        console.log(letters)
        resolve()
        reject(new Error("Request is failed"))
        },
      Math.floor(Math.random() * 100) + 1
      )
      
  })
  
}
 
let allPrinter3 = async function() {
  try {
  await printer("a");
  await printer("b");
  await printer("c")
  }
  catch(err) {
    console.log(err);    
  }
}
 

 

printer 함수를 지정하는 부분은 Promise를 통해 동일하게 지정해주었다. 하지만 printer라는 비동기 함수를 실행하는 부분이 달라진다.

 

1. 함수의 선언문(또는 화살표 함수의 맨 앞 부분)에 async를 작성해준다.

2. try 구문 안에 'await'를 붙인 비동기 함수 실행문을 작성한다.

3. catch 구문에 error를 잡는 부분을 만들어준다.

 

 

 

 

실제로는 nodejs에서 fetch, json() 구문과 같은 것을 사용하여 비동기 프로그래밍을 한다. 애초에 server가 프로그램의 특정 구문을 실행하고, 요청에 대한 응답을 하는데 시간이 소요되는 문제로 인해 비동기 프로그래밍을 한 것이기 때문이다. 다른 글에서 nodejs 환경이나 server와의 통신 등에 대한 이해를 한 뒤에,  여태까지 배웠던 비동기프로그램의 개념을 접목해볼 것이다. 

(브라우저에서 사용할 수 있는 비동기 기능들은 Timer, DOM Event 등과 관련된 것으로 사용처가 한정적이지만, nodejs 환경에서는 상당히 많은 API가 비동기로 작성되어있다.)

 

비동기 프로그래밍의 '기초'에 대한 이해는 일단 여기서 마무리!

---

 

 

주의&참고 사항

 

1. await 뒤에는 Promise가 리턴되는 함수만 써야한다. 예를 들어 'await setTimeout(){ ... }' 같은 방식으로 쓰면 안된다!

async 함수 안에 promise를 반환하지 않은 함수를 쓰면 결과값으로 Promise 객체가 반환되며,

promise를 반환하는 함수를 쓰면 결과값으로 response 값을 갖고 오게 된다.

 

2. response.json()도 비동기함수이므로, 만약 async, await 문법을 쓸려면 await를 붙여줘야 한다.

 

3. node에서는 fetch를 사용할 수 없고, 브라우저에서만 사용할 수 있다.

파일을 다루는 것은 브라우저에서는 힘들고, 노드에서만 가능하다.