[javaSCript] promise에서 async로, async에서 프로미스로 바뀌는 예제들

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의 유연성을 잘 보여줍니다.