[JavaScript] async와 await 개념과 Fetch

promise와 비동기 처리방식 설명 글: https://for-it-study.tistory.com/88 

[JavaScript] 비동기 처리 방식 (callback, setTimeout, promise)

 

- promise 방식은 작업이 많아지면 callback 함수처럼 코드의 깊이가 길어진 않지만 특정 조건에 따라 분기를 나누기가 어렵다는 단점과 어떠 부분에서 에러가 발생했는지 파악하기가 어렵다는 단점을 가졌다.

 

- callback 함수보다는 상대적으로 괜찮지만 프로미스 체이닝도 반복되면 가독성이 떨어질 수 있다는 특징이 있다.

 

위와 같은 promise의 단점을 극복할 수 있는 것이 async와 await 방식이다.

 

async/await은 promise를 기반으로 동작하고 then 없이도 비동을 동기처럼 보이도록 할 수 있다. 보다 간결한 코드 작성을 위해 만들어져서 'syntatic sugar'라고도 불린다. promise 방식보다 가독성이 좋고 동기 프로그래밍을 작성하는 방식과 유사하여 직관적으로 로직을 파악 할 수 있다.

1.  async

- async는 함수 앞에 작성해주며 이를 붙인 함수는 항상 Promise를 반환한다. Promise가 아닌 값을 반환하여도 이행 상태의 Promise로 값을 감싸 이행된 Promise가 반환된다.

 

2.  await

- async가 쓰인 함수 안에서 작성할 수 있다. await 키워드가 쓰인 구문은 Promise가 처리될 때까지 기다린다.

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

- 즉 비동기 처리가 되어야 하는 메서드 앞에 await 키워드를 넣어서 사용하면 된다. 

- 일반적으로 Promise를 반환하는 API 호출 함수가 await을 자주 사용한다.

 

* await keyword는 반드시 async 함수 내부에서만 사용해야 하고 프로미스 앞에서 사용해야 한다. 만약 async 외부에서 사용하게 되면 SyntaxError가 발생한다.

 

예시)

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

async function asyncCall() {
  console.log('calling');
  const result = await resolveAfter2Seconds();
  console.log(result);
  // expected output: "resolved"
}

asyncCall();

 

3. Fetch

- 비동기 네트워크 통신을 구현하기 위해  사용하는 Web API이다. 비동기 네트워크 통신이란 요청에 대한 응답을 기다리지 않고 응답을 받을 동안 다른 일들을 진행하는 통신을 뜻한다. 따라서 보다 효율적으로 데이터를 렌더링 할 수 있다는 특징이 있다.

fetch()는 2개의 매개변수를 가진다.

- 첫 번째 매개변수 (resource) : 필수 사항, HTTP 요청을 보낼 UR

- 두 번째 매개변수 (options) : 선택 사항, method, headers, body 등

 

예시) async와 await을 사용하여 fetch 비동기 통신하기

const root = document.getElementById("root");

	async function getProductData() {
            const response = await fetch("데이터를 가져올 ur")
            // 텍스트 형태로 반환한다.
            const product = await reponse.json();
            return product;
}
// 앞에 async를 붙이지 않으면 에러가 발생할 수 있다.