자바스크립트의 비동기 처리 - async & await

동기, 비동기

• 동기 : 코드가 작성된 순서 그대로 실행, 자바스크립트는 기본적으로 동기적 실행
• 비동기 : 순서대로 진행하지 않아도 되어서, 다른 작업을 실행할 수 있음

ex ) 해야할 일 처리하기 : 1. 세탁기 돌리기 / 2. 빨래 널기 / 3. 청소기 돌리기 / 4. 밥 짓기 / 5. 밥 먹기

동기 ▶️ 세탁기 다 돌릴 때까지 기다리기 -> 빨래 널기 -> 청소기 돌리기 -> 밥 짓기 -> 밥 먹기
비동기 ▶️ 세탁기 돌려놓기(타이머) -> 밥 짓기(타이머) -> 청소기 돌리기 -> (세탁기 끝) 빨래널기 -> (밥 짓기 끝)밥 먹기

🗨️즉, 비동기에서는 멀티태스킹이 구현되고 있다 !
이때, async & await를 이용하면 await에 의해서 잠깐 멈춰서 promise를 실행하고, 다음 코드를 실행할 수 있다. (비동기 처리 제어하기)
비동기 작업을 마치 동기 작업처럼 작성할 수 있게 된다.

---

❓자바스크립트는 기본적으로 싱글스레드로, 동기적 동작이라고 하였는데, 왜 굳이 async & await를 사용하면서 동기적 방식을 채택하나요❓

https://www.youtube.com/watch?v=m0icCqHY39U&t=234s
(얄팍한 코딩사전 | [코딩만화] 비동기 프로그래밍이 뭔가요?)

🔼 위의 강의에 따르면,
우리가 데이터를 요청 할 때는 시간이 소요되며, 비동기적 동작을 한다. (이는 자바스크립트가 도는 환경에서는Web API라는 것도 동작을 하기 때문이다.)
이때 1) callback 함수 or 2) Promise or 3) async & await 등의 방법으로 비동기를 처리하지 않으면 데이터를 받기도 전에 데이터를 출력하는 다음 코드를 실행하게 될지도 모른다.
🗨️ 데이터를 기다려주어야 함.

비동기 처리 방식은 주로 2) Promise와 3) async & await를 사용한다. 이번 포스팅에서는 async & await에 대해서 알아본다!

async

💫 사용하는 방법 💫

• 일반 함수

async function f() {
  return 1;
}

• 화살표 함수

const f = async () => {
    return 1;
  }

---

💫 해당 함수는 항상 프로미스를 반환 💫

const f = async () => {
    return 1;
  }
  console.log(f()) // Promise {<pending>}

f() 함수의 리턴값은,

const f = async () => {
    return Promise.resolve(1)
  }
  console.log(f()) // Promise {<pending>}

위와 같다. 즉, async 함수의 반환값은 암묵적으로 Promise.resolve로 감싸진다.

"async가 붙은 함수는 반드시 프로미스를 반환하고, 프로미스가 아닌 것은 프로미스로 감싸 반환"

await : async 함수 안에서만 사용가능

💫 사용예시 - 반드시 async 함수 안에서 사용💫

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000)
  });
  
  let result = await promise;//프로미스가 이행될 때까지 기다림(*)

  alert(result); // "완료!"
}

f();

async함수 내에서 사용된 await는 프로미스가 이행될 때까지 기다리는 역할을 한다.
프라미스가 정상적으로 이행되면, await promise는 프라미스 객체의 result에 저장된 값을 반환

---

💫에러 핸들링💫

async & await의 장점 중 하나는 try..catch구문을 사용할 수 있다는 것이다. 따라서,promise.then/catch를 사용하는 것보다 훨씬 편리하다.

async function f() {

  try {
    // fetch 기다리기 * 거부되면 catch 블록으로
    let response = await fetch('http://유효하지-않은-주소');
    // json 변환 기다리기 * 거부되면 catch 블록으로
    let user = await response.json();
  } catch(err) {
    // fetch와 response.json에서 발행한 에러 catch
    alert(err);
  }
}

f();

async & await Promise.all 함께 사용하기

여러 개의 프로미스가 모두 처리되길 기다려야 하는 상황일 때 사용

// 프라미스 처리 결과가 담긴 배열을 기다립니다.
let results = await Promise.all([
  fetch(url1),
  fetch(url2),
  ...
]);

---

💫참고자료, 출처💫

https://ko.javascript.info/async-await
https://www.youtube.com/watch?v=m0icCqHY39U&t=234s
(얄팍한 코딩사전 | [코딩만화] 비동기 프로그래밍이 뭔가요?)