async/await 무엇일까?

안녕하세요 YB 최정완 입니다 

비동기 처리와 관련있는 키워드 두 가지를 알아보아요 

🤩

 

[들어가기]

* Promise 객체란?

Promise 객체는 JavaScript에서 비동기 작업의 성공 여부와 결과를 나타내는 객체이다.

주로 비동기 작업이 완료되었을 때 그 결과를 처리하거나, 오류가 발생했을 때 그 오류를 처리하기 위해 사용된다. 

 

Promise 객체는 총 세 가지의 상태를 갖고 있습니다. 

 

대기 (Pending): 초기 상태로, 아직 결과가 없고 작업이 진행 중이다.

성공 (Fulfilled): 비동기 작업이 성공적으로 완료된 상태이다. -> 작업의 결과 사용 가능 

실패 (Rejected): 비동기 작업이 실패한 상태이다. -> 작업 중 발생한 오류 사용 가능 

 

* 비동기 작업이란?

Q: 왜 필요한가?

A: 컴퓨터는 한 번에 여러 가지 일을 처리할 수 있고,

우리는 기다리지 않고 다른 걸 하다가 작업이 끝나면 알림을 받는 식으로 더 편하게 일을 할 수 있어요. 

 

비동기 작업과 동기 작업

• 동기 작업: 코드가 위에서 아래로 순차적으로 실행됩니다. 한 작업이 끝난 후에 다음 작업을 실행한다.
• 비동기 작업: 서버로 요청을 보내고 응답이 올 때까지 기다리는 동안 다른 작업을 실행할 수 있다. 이때 응답을 받는 시간이 불확실하므로, 다른 작업을 하면서도 응답을 기다릴 수 있게 해야 한다.

1. async

 

• 함수 앞에 async를 붙이면, 그 함수는 자동으로 Promise 객체를 반환한다. 
• async 함수 안에서는 await 키워드를 사용하여 비동기 작업을 기다릴 수 있다.

2. await

 

• await 키워드는 async 함수 내부에서만 사용할 수 있다.
• await를 사용하면 Promise가 처리될 때까지 기다린다. 즉, Promise가 해결되기 전까지 그 다음 코드 실행을 중단한다.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchData();

 

// 화살표 함수
const fetchData = async () => {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
};

// 함수 호출
fetchData();

 

• async 함수 선언: 함수 앞에 async 키워드를 붙이면 함수가 항상 Promise를 반환하게 된다. 
• await 사용: await 키워드는 Promise가 완료될 때까지 코드 실행을 일시 정지시킨다. (await 키워드를 사용하려면 함수가 async로 반드시 선언되어야 한다!)
• 오류 처리: 비동기 작업 중 오류가 발생할 수 있으므로 try-catch 문을 사용하여 에러를 처리할 수 있다.

 

비동기 HTTP 요청 라이브러리인 Axios와 함께 async/await을 사용하는 방법

import axios from 'axios';

async function postData() {
  try {
    const response = await axios.post('https://api.example.com/data', {
      username: 'user1',
      password: 'password123',
    });
    console.log(response.data);
  } catch (error) {
    console.error('Error:', error.response ? error.response.status : error.message);
  }
}

postData();

 

그래서 왜 쓰는 것? 

 

• 가독성: async/await를 사용하면 코드가 더 읽기 쉽고 이해하기 쉽다.
• 에러 처리: try/catch를 사용하여 비동기 요청의 에러를 쉽게 처리할 수 있다. 

---

The End

🥸