JavaScript에서는 `async`와 `await`를 사용하여 비동기 코드를 작성할 수 있으며, 이는 기존의 `Promise`를 사용한 비동기 패턴을 더욱 간결하게 만들어 줍니다. `Promise` 기반 코드를 `async/await`로 변환하거나 그 반대로 변환하는 여러 예제를 통해 이해를 돕겠습니다.
### 1. Promise를 async/await로 변환하는 예제
**원본 Promise 코드:**
```javascript
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => resolve("Data loaded"), 2000);
});
}
fetchData()
.then(data => console.log(data))
.catch(error => console.error(error));
```
**async/await로 변환된 코드:**
```javascript
async function fetchData() {
try {
const data = await new Promise((resolve, reject) => {
setTimeout(() => resolve("Data loaded"), 2000);
});
console.log(data);
} catch (error) {
console.error(error);
}
}
fetchData();
```
### 2. async/await를 Promise로 변환하는 예제
**원본 async/await 코드:**
```javascript
async function getUser() {
try {
const response = await fetch('https://api.github.com/users/example');
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
getUser();
```
**Promise로 변환된 코드:**
```javascript
function getUser() {
fetch('https://api.github.com/users/example')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
}
getUser();
```
### 3. 복합적인 예제: Promise와 async/await 혼합 사용
**원본 Promise 코드:**
```javascript
function getPosts() {
return fetch('https://api.github.com/posts')
.then(response => response.json());
}
function processPosts() {
getPosts()
.then(posts => {
console.log(posts.length);
})
.catch(error => console.error(error));
}
processPosts();
```
**async/await로 변환된 코드:**
```javascript
async function processPosts() {
try {
const posts = await getPosts();
console.log(posts.length);
} catch (error) {
console.error(error);
}
}
async function getPosts() {
const response = await fetch('https://api.github.com/posts');
return response.json();
}
processPosts();
```
### 4. 조금 더 복잡한 예제의 변환
**원본 async/await 코드:**
```javascript
async function calculateTotal() {
try {
const resultA = await someAsyncOperationA();
const resultB = await someAsyncOperationB(resultA);
return resultA + resultB;
} catch (error) {
console.error(error);
}
}
calculateTotal().then(total => console.log(total));
```
**Promise로 변환된 코드:**
```javascript
function calculateTotal() {
return someAsyncOperationA()
.then(resultA => {
return someAsyncOperationB(resultA)
.then(resultB => resultA + resultB);
})
.catch(error => console.error(error));
}
calculateTotal().then(total => console.log(total));
```
이 예제들은 각각의 패턴을 사용하여 동일한 기능을 수행하도록 변환된 것을 보여줍니다. 각 변환은 특정 상황에 따라 코드의 가독성이나 작성 스타일을 개선할 수 있으며, JavaScript의 유연성을 잘 보여줍니다.
댓글 영역