인프런 커뮤니티 질문&답변
작성한 질문수
await에 대해 약간 헷갈리게되버렸어요
해결된 질문
작성
·
307
·
수정됨
0
수업에서 async await를 쓰게 되면,
await 뒤쪽 함수가 실행 된 후, await를 보자마자 어? 오래걸리겟네? 하면서 스레드가 해당 async함수를 통째로 마이크로큐에 넣어버린다고 말씀하셨는데요.
만약 await뒤의 함수가 Promise를 반환하게 되면, 해당 Promise를 반환하는 함수가 먼저 큐에 쌓이고, 그 뒤에 async함수가 들어가서 pipo구조에 따라, promise가 반환된 후 async함수가 실행되면서 기다리는것처럼 보인다고 말해주셨습니다.
근데... 이 말 대로라면, await 함수 뒤에 굳이 Promise가 올 필요가 있나요? XMLHttpRequest()가 오더라도, 콜스택에서 해당요청이 실행된 후, 결과값을 가진 상태에서 마이크로큐로 들어가니까, 똑같이 await가 되는게 아닌지요?
분명 순차적으로 수업을 들으면서 다 이해햇다고 생각햇는데
갑자기 헷갈립니다.
답변 2
0
안녕하세요! 지환님!
공부 열심히 하고 계시는군요!
Promise로 작동하는 axios, fetch 등의 기능을 사용하시게 되면 최종 결과를 받아서 저장할 수 있겠죠!
const friends = await axios.get("철수내놔!")
console.log(friends) // 철수
XMLHttpRequest() 역시 마찬가지로 동일한 순서로 작동되는 것을 실험을 통해서 확인해 보실 수 있는데요!
문제는 해당 결과를 위에서처럼 받지 못하고, callback함수를 사용하여 받아야 하기 때문에 콜백 지옥에 빠진다는 문제가 있답니다!
const xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.open("get", "철수내놔!");
xmlHttpRequest.send();
xmlHttpRequest.addEventListener("load", (result) => { 여기서 result 받기 })
// 아래처럼 못 받음
// const friends = await xmlHttpRequest.addEventListener("load")0
안녕하세요, 인프런 AI 인턴입니다.
await 키워드는 비동기 함수 내에서 사용되며, await을 사용할 때의 기본 목적은 Promise가 이행(resolve)될 때까지 함수의 실행을 일시 정지하고, Promise의 결과를 기다리는 것입니다. await 뒤에 오는 함수가 Promise를 반환하지 않는 경우라도 자바스크립트 엔진은 그 값을 resolve하는 Promise로 간주하고 코드를 처리합니다. 즉, await는 Promise가 아닌 값을 반환하는 표현식에도 사용 가능하지만, 일반적으로 Promise를 반환하는 비동기 작업을 기다릴 때 사용하기 위해 설계되었습니다.
XMLHttpRequest()와 같은 구형 API는 콜백 패턴을 사용하여 비동기 작업을 처리합니다. await과 함께 사용할 수 있도록 Promise로 래핑하는 것이 일반적인 패턴입니다. 이렇게 함으로써, 비동기 작업 완료 후 코드의 실행을 이어갈 수 있으며, 코드의 가독성을 높이고 비동기 흐름을 더욱 명확하게 제어할 수 있습니다.
따라서 await 키워드를 사용할 때는 주로 Promise를 반환하는 비동기 함수 또는 표현식과 함께 사용하는 것이 일반적이며, 이는 해당 Promise의 처리 결과를 쉽고 명확하게 다루기 위한 용도로 사용됩니다. 비동기 작업의 완료를 기다리는 동안 자바스크립트 엔진은 다른 작업을 수행할 수 있으므로, 성능적으로도 이점이 있습니다.
결론적으로, await는 비동기 작업을 처리하는 표준적인 방법으로 쓰이며, 기존의 콜백 기반 비동기 처리 방식에 비해 가독성과 코드 관리 측면에서 많은 장점을 제공합니다.