수정하기 - 자바스크립트에서 async/await는 어떻게 작동하나요?

닉네임

비밀번호

제목

내용 [이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]

JavaScript에서 `async/await`는 비동기 프로그래밍을 보다 간결하고 이해하기 쉽게 만드는 문법입니다. 이 기능은 <a href='https://sangseek.com/sangseeks/ES2017/ko'>ES2017</a>(ES8)에서 도입되었으며, <a href='https://sangseek.com/sangseeks/비동기 함수/ko'>비동기 함수</a>의 작성과 호출을 더 직관적으로 만들어 줍니다. `async/await`는 <a href='https://sangseek.com/sangseeks/프로미스/ko'>프로미스</a>(Promise) 기반의 <a href='https://sangseek.com/sangseeks/비동기 작업/ko'>비동기 작업</a>을 처리하는 데 사용됩니다.           1. `async` 함수    `async` 키워드는 <a href='https://sangseek.com/sangseeks/함수 선언/ko'>함수 선언</a> 앞에 붙여서 해당 함수가 비동기 함수임을 나타냅니다. `async` 함수는 항상 프로미스를 반환합니다. 만약 함수 내에서 명시적으로 프로미스를 반환하지 않더라도, JavaScript는 그 값을 자동으로 프로미스로 감싸서 반환합니다.    ```javascript  async function myAsyncFunction() {      return "Hello, World!";  }    myAsyncFunction().then(result => console.log(result)); // "Hello, World!"  ```    위의 예제에서 `myAsyncFunction`은 `async`로 정의되었기 때문에, 반환된 값은 자동으로 프로미스로 감싸집니다.           2. `await` 키워드    `await` 키워드는 `async` 함수 내에서만 사용할 수 있으며, 프로미스가 처리될 때까지 함수의 실행을 일시 중지합니다. `await`는 프로미스가 해결(resolve)되거나 거부(reject)될 때까지 기다립니다. 프로미스가 해결되면 그 결과값을 반환하고, 거부되면 에러를 발생시킵니다.    ```javascript  async function fetchData() {      <a href='https://sangseek.com/sangseeks/const/ko'>const</a> response = await fetch('https://api.example.com/data');      const data = await response.json();      return data;  }    fetchData().then(data => console.log(data)).catch(error => console.error(error));  ```    위의 예제에서 `fetchData` 함수는 `fetch` API를 사용하여 데이터를 가져옵니다. `await`를 사용하여 비동기 작업이 완료될 때까지 기다린 후, JSON 데이터를 반환합니다.           3. 에러 처리    `async/await`를 사용할 때는 `try/catch` 블록을 사용하여 에러를 처리할 수 있습니다. 이는 비동기 함수 내에서 발생할 수 있는 오류를 보다 쉽게 관리할 수 있게 해줍니다.    ```javascript  async function fetchData() {      try {          const response = await fetch('https://api.example.com/data');          if (!response.ok) {              throw new Error('Network response was not ok');          }          const data = await response.json();          return data;      } catch (error) {          console.error('Error fetching data:', error);      }  }  ```    위의 예제에서는 `try/catch`를 사용하여 네트워크 요청 중 발생할 수 있는 오류를 처리합니다. 만약 `fetch` 호출이 실패하면, <a href='https://sangseek.com/sangseeks/에러 메시지/ko'>에러 메시지</a>가 콘솔에 출력됩니다.           4. 병렬 처리    `async/await`를 사용하여 여러 비동기 작업을 병렬로 처리할 수 있습니다. 여러 프로미스를 동시에 실행하려면 `Promise.all`을 사용할 수 있습니다.    ```javascript  async function fetchMultipleData() {      const urls = [          'https://api.example.com/data1',          'https://api.example.com/data2',          'https://api.example.com/data3'      ];        try {          const responses = await Promise.all(urls.map(url => fetch(url)));          const data = await Promise.all(responses.map(response => response.json()));          return data;      } catch (error) {          console.error('Error fetching multiple data:', error);      }  }  ```    위의 예제에서는 여러 URL에서 데이터를 동시에 가져옵니다. `Promise.all`을 사용하여 모든 프로미스가 해결될 때까지 기다린 후, 각 응답을 JSON으로 변환합니다.           5. 결론    `async/await`는 JavaScript에서 비동기 코드를 작성하는 데 있어 매우 유용한 도구입니다. 코드의 가독성을 높이고, 비동기 작업을 동기적으로 처리하는 것처럼 작성할 수 있게 해줍니다. 그러나 `async/await`를 사용할 때는 항상 프로미스의 상태를 고려해야 하며, 적절한 에러 처리를 통해 안정적인 코드를 작성하는 것이 중요합니다. 이러한 기능을 통해 개발자는 복잡한 비동기 로직을 보다 쉽게 관리하고, 유지보수할 수 있습니다.