await와 then 함께쓰기?

Promise를 처리하기 위해서 then으로 체이닝을 하거나 async/await 함수를 활용할 수 있다.

그런데, 이 둘이 함께 쓰인 코드를 보았다.

 

재현해보자면, 다음과 같다.

const { default: axios } = require("axios");

const sampleFn = async () => {
    try {
        const result = await axios.get("https://jsonplaceholder.typicode.com/todos/1")
            .then(el => {
                console.log("then", el.data);
                return el.data;
            })
            .catch(err => console.error("then", err));
        console.log('await', result);
    } catch (err) {
        console.error("await", err);
    }
}

sampleFn();

실제로 실행해보면, 위의 코드는 정상 작동하여 el.data와 result의 값이 동일하게 나타난다.

즉, .then()과 await를 함께 사용하는 것은 가능하다.

하지만, 함께 사용하는 것이 아니라 특정 상황에 따라 필요한 방법을 선택하는 것이 좋다. (함께 사용하는 것이 크게 의미가 없을 수 있다)

 

보통 async/await가 가독성이 좋고 코드가 짧아 선호되지만, 때로는 then을 통해서 처리하는 게 나은 경우도 있다.

비동기적인 코드와 동기적으로 작동해야하는 코드를 분리할 땐 then을 사용하는 편이 더 나을 수도 있다.

요구사항에 따라서 적절한 방법을 선택해 사용하자.