수정하기 - 자바스크립트에서 함수의 비동기 처리를 위한 async/await 사용법은 무엇인가요?

닉네임

비밀번호

제목

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

JavaScript에서 비동기 처리를 위한 `async/await`는 ES2017(ES8)에서 도입된 기능으로, 비동기 코드를 작성할 때 더 간결하고 읽기 쉽게 만들어 줍니다. `async/await`를 사용하면 프로미스(Promise)를 기반으로 한 비동기 작업을 마치 동기적으로 처리하는 것처럼 작성할 수 있습니다. 이로 인해 코드의 가독성이 높아지고, 에러 처리가 더 용이해집니다.           1. async 함수    `async` 키워드는 함수 선언 앞에 붙여서 사용합니다. 이 키워드가 붙은 함수는 항상 프로미스를 반환합니다. 만약 함수 내에서 명시적으로 프로미스를 반환하지 않더라도, JavaScript는 해당 함수의 반환 값을 프로미스로 감싸서 반환합니다.    ```javascript  async function example() {      return "Hello, World!";  }    example().then(result => console.log(result)); // "Hello, World!"  ```           2. await 키워드    `await` 키워드는 `async` 함수 내에서만 사용할 수 있으며, 프로미스가 처리될 때까지 코드의 실행을 일시 중지합니다. 프로미스가 이행(fulfilled)되면, `await`는 해당 프로미스의 결과 값을 반환합니다. 만약 프로미스가 거부(<a href='https://sangseek.com/sangseeks/rejected/ko'>rejected</a>)되면, `await`는 에러를 발생시킵니다.    ```javascript  async function fetchData() {      const 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:', error));  ```           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);      }  }    fetchData();  ```           4. 여러 비동기 작업 처리    `async/await`를 사용하면 여러 비동기 작업을 순차적으로 처리할 수 있습니다. 그러나 여러 작업을 동시에 실행하고 싶다면, `<a href='https://sangseek.com/sangseeks/Promise.all/ko'>Promise.all</a>`을 사용할 수 있습니다.    ```javascript  async function fetchMultipleData() {      try {          const [data1, data2] = await Promise.all([              fetch('https://api.example.com/data1').then(res => res.json()),              fetch('https://api.example.com/data2').then(res => res.json())          ]);          console.log(data1, data2);      } catch (error) {          console.error('Error fetching multiple data:', error);      }  }    fetchMultipleData();  ```           5. 요약    - `async` 키워드는 비동기 함수를 정의하며, 항상 프로미스를 반환합니다.  - `await` 키워드는 프로미스가 처리될 때까지 기다리며, 결과 값을 반환합니다.  - `try/catch` 블록을 사용하여 비동기 작업에서 발생하는 에러를 처리할 수 있습니다.  - `Promise.all`을 사용하여 여러 비동기 작업을 동시에 실행할 수 있습니다.    `async/await`는 비동기 코드를 작성하는 데 있어 매우 유용한 도구이며, 이를 통해 복잡한 비동기 로직을 더 간결하고 이해하기 쉽게 만들 수 있습니다.