[Javascript] async await

📑 자바스크립트는 싱글 스레드 기반의 프로그래밍 언어

---

하나의 스레드에서 모든 작업을 처리하도록 되어 있기 때문에 한번에 하나의 작업만 처리할 수 있다. 

이러한 문제점을 해결하기 위해 비동기 처리가 필요하다.

 

동기(sunchronous): 어떤 작업을 실행할 때 그 작업이 끝나기를 기다리는 방식

비동기(asynchronous): 어떤 작업 실행 시 그 작업이 완료되지 않았더라도 다음 코드를 실행하는 방식. 작업이 오래 걸리는 경우 시간을 절약하고 병렬적인 작업 처리가 가능하다.

 

 

 

📑 자바스크립트 비동기 처리 방식

---

비동기 처리 백그라운드로 동작하기 때문에 결과가 언제 반환되는지 알 수 없어 결과를 받아 처리하기 위해 사용되는 방식 3가지가 있다.

 

1. 콜백함수 (Callback)

2. 프로미스 객체(Promise)

3. async, await

 

하지만 콜백함수와 프로미스객체는 서비스 규모가 커질수록 코드가 복잡해져서 가독성이 떨어지고 유지보수가 어려워진다.

//Callback Hell

step1(function (value1) {
    step2(function (value2) {
        step3(function (value3) {
            step4(function (value4) {
               ......
            });
        });
    });
});

//Promise Hell

fetch('https://example.com/api')
  .then(response => response.json())
  .then(data => fetch(`https://example.com/api/${data.id}`))
  .then(response => response.json())
  .then(data => fetch(`https://example.com/api/${data.id}/details`))
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

 

 

이를 해결하기 위해 async,await를 사용하며 가독성과 유지보수에 용이하다.

async function getData() {
    const response = await fetch('https://example.com/api');
    const data = await response.json();
    const response2 = await fetch(`https://example.com/api/${data.id}`);
    const data2 = await response2.json();
    const response3 = await fetch(`https://example.com/api/${data.id}/details`);
    const data3 = await response3.json();
    console.log(data3);
}

getData();

 

📑 async 와 await 

---

# async await 기본 문법

async function 함수명() {
  await 비동기_처리_메서드_명();
}

함수의 앞에 async라는 예약어를 붙인 후 함수의 내부 로직 중 HTTP 통신을 하는 비동기처리 코드 앞에 await를 붙입니다.

주의❗비동기 처리 메서드가 꼭 프로미스 객체를 반환해야 await가 의도한대로 동작한다.

 

1. async 함수

 

- "이 함수는 비동기적인 함수이고 Promise를 반환한다"라고 선언하는 것이다.

(반환값이 Promise 생성 함수가 아니어도 반환되는 값을 Promise 객체에 넣는것)

async function func1() {
    return 1;
}

const data = func1();
console.log(data);

//결과값
Promise {<fulfilled>: 1}
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: 1

function 앞에 async를 붙이면 해당 함수는 항상 Promise를 반환한다.

Promise가 아닌 값을 반환하더라도 이행 상태의 Promise (resolved promise)로 값을 감싸 반환시킨디ㅏ.

 

async function resolveP() {
    return Promise.resolve(2);
}

async function rejectP() {
    return Promise.reject(2);
}

//결과값
resolveP()
Promise {<fulfilled>: 2}
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: 2

rejectP()
Promise {<rejected>: 2}
[[Prototype]]: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: 2

정적 메서드도 동일하게 반환된다. 

 

정적 메서드(Static Method)란?? 클래스의 인스턴스(객체)와 관계없이 클래스 자체에서 호출할 수 있는 메서드

위에서 정적 메서드는 Promise.reslove(2)와 Promise.reject(2) 가 된다.

 

 

  또한 async 함수 자체에서 then 핸들러를 붙일 수 있다.

async function func1() {
  return 1;
}

func1()
	.then(data => console.log(data));

⚠ then 핸들러 코드는 남용할 경우 Promise Hell에 걸릴 수 있어서 이용하지는 않는다.

---

2. await 함수

-비동기로 처리되는 부분 앞에 붙여준다.

-Promise 비동기 처리가 완료 (성공, 실패) 될때까지 코드 실행을 일시 중지하고 wait 한다.

async function getData() {
  const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
  const data = await response.json();
  console.log(data):
}

 위 예시를 보면

 

1. getData() async 함수 내에서 fetch() 비동기 함수를 호출하고, 반환된 Promise를 await 키워드로 처리

2. 이로 인해 함수 내 코드 실행이 일시 중지되고 fetch()함수가 완료될때까지 기다림

3. 다음 response.json() 함수를 호출해 반환 promise를 await로 처리

4. 데이터를 가져오는 동안 코드 실행이 일시 중지되고 최종 결과 값을 반환

 

-> 비동기적인 작업을 동기적으로 처리한다.

 

// 비동기 작업을 동기적으로 보이게 처리하는 예시
async function fetchData() {
  console.log("데이터 요청 시작");

  // 서버에서 데이터를 가져오는 비동기 작업
  const result = await new Promise((resolve) => {
    setTimeout(() => resolve("데이터 응답 완료"), 2000); // 2초 후에 응답
  });

  console.log(result); // 데이터 응답 완료 후 출력
  console.log("후속 작업 실행");
}

fetchData();
console.log("다른 작업 실행");

1. fetchData 함수가 호출된다.

2. 비동기 작업 시작 (await) - await뒤의 Promise는 2초 후 데이터를 응답하도록 설정되어 있다. 즉, javascript가 이 작업이 끝날때까지 기다리게 하고, 그동안 코드 실행은 되지 않는다.

3. fetchData() 바깥 코드는 블로킹 되지 않고 계속 실행되어 fetchData()내의 비동기 작업이 완료되기 전에 "다른 작업 실행"이 출력된다.

4. 비동기 작업 완료 후 후속 작업 실행 - 2초 후 promise가 완료되면서 "데이터 응답 완료"가 result 변수에 저장 이후 "데이터 응답 완료" 라는 로그가 출력되고 마지막 "후속 작업 실행"이 출력

 

------출력 순서-------

1. 데이터 요청 시작

2. 다른 작업 실행

3. 데이터 응답 완료

4. 후속 작업 실행

📑 async await  예외 처리

---

// async/await 방식
async function func() {

    try {
        const res = await fetch(url); // 요청을 기다림
        const data = await res.json(); // 응답을 JSON으로 파싱
        // data 처리
        console.log(data);
    } catch (err) {
        // 에러 처리
        console.error(err);
    }

}
func();

위 코드와 같이 try~catch로 예외 처리를 한다.

네트워크 통신 오류뿐만 아니라 간단한 타입 오류 등 일반적인 오류도 catch로 잡을 수 있다.

 

 

 

---

🔽내용 및 코드 참조🔽

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EB%B9%84%EB%8F%99%EA%B8%B0%EC%B2%98%EB%A6%AC-async-await

📚 자바스크립트 Async/Await 개념 & 문법 정복

https://trustmitt.tistory.com/85

async / await 개념 정리 (Feat. 동기, 비동기)