ES6에 도입된 Promises를 사용하면 다른 콜백 함수를 처리하지 않고도 비동기 코드를 쉽게 작성할 수 있습니다. Promise를 사용하면 작성하고 유지 관리하기 어려운 다단계 콜백 함수에 대해 걱정할 필요가 없습니다.
JavaScript에는 Promises를 사용하여 비동기 코드를 훨씬 더 쉽게 작성할 수 있는 또 다른 기능이 있습니다. async/await 함수입니다. 이를 통해 동기처럼 보이지만 실제로는 비동기 루틴을 수행하는 코드를 작성할 수 있습니다.
이 가이드에서는 async/await 함수가 무엇이며 코드에서 어떻게 사용할 수 있는지 논의할 것입니다. 시작하겠습니다!
약속:재충전
async/await 함수에 대해 이야기하기 전에 Promise를 요약해야 합니다. 약속은 비동기 작업을 나타냅니다. 작업이 수행될 것임을 코드에 알리고 작업이 성공하면 값이 반환됩니다. 그렇지 않으면 프로그램의 나머지 부분에 오류가 반환됩니다.
Promise는 Promise가 생성될 때 알려지지 않은 값을 나타냅니다. 약속은 미래의 값이 코드로 다시 보내질 것이라는 약속입니다. Promise는 개체이므로 대문자로 표시해야 합니다.
이 시나리오를 고려하십시오. API에서 리소스를 검색해야 합니다. 요청을 처리하는 데 1~2초 정도 걸립니다. 사용자가 요청이 처리될 때까지 기다리게 하는 대신 나머지 프로그램이 계속 실행될 수 있도록 코드를 Promise로 이동할 수 있습니다.
즉, 데이터를 검색하는 동안 웹사이트 사용자 인터페이스의 일부를 계속 렌더링할 수 있습니다. 값이 반환되는 즉시 Promise는 이를 기본 프로그램으로 보냅니다.
다음은 약속의 예입니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
let sendCookies = new Promise(resolve => {
setTimeout(() => {
resolve("Your cookies have been sent!");
}, 1000);
});
sendCookies.then(data => {
console.log(data);
}) 코드 반환:쿠키가 전송되었습니다! sendCookies.then() 메서드를 실행하면 Promise가 시작됩니다. 우리 프로그램은 1,000밀리초를 기다린 다음 "귀하의 쿠키가 전송되었습니다!"라는 값을 다시 보냅니다. 우리의 주요 프로그램에.
비동기 및 대기 사용 방법
async/await 함수에서 await 문은 약속이 반환될 때까지 비동기 함수 내에서 코드가 실행되는 것을 차단합니다. 이러한 이유로 개발자들은 종종 async/await 함수가 동기적으로 보이지만 비동기 작업을 수행한다고 말합니다.
다음 예를 고려하십시오.
function sendCookies() {
return new Promise(resolve => {
setTimeout(() => {
resolve("Your cookies have been sent!");
}, 1000);
});
}
async function main() {
const sendMessage = await sendCookies();
console.log(sendMessage);
}
main();
코드 반환:쿠키가 전송되었습니다! sendCookies() 함수가 "귀하의 쿠키가 전송되었습니다" 값을 반환하는 데 1,000밀리초가 걸립니다. 이 경우 코드가 약속이 해결되거나 거부될 때까지 기다리도록 비동기 함수를 선언했습니다.
"async" 키워드는 코드에 함수에서 비동기 작업을 수행하고 싶다고 알려줍니다. "await" 키워드는 프로그램을 계속 실행하기 전에 sendCookies() 약속의 반환을 기다리도록 코드에 지시합니다.
비동기 함수는 항상 Promise를 반환합니다.
Async 및 Await를 여러 단계로 사용하기
Async/await 함수는 작업해야 하는 여러 약속이 있을 때 가장 일반적으로 사용됩니다. 이것을 프라미스 체이닝이라고 합니다. 이는 코드가 다음 단계로 이동하기 전에 각 단계에서 Promise가 반환될 때까지 기다리기 때문입니다.
function processOrder() {
return new Promise(resolve => {
setTimeout(() => {
resolve("Your cookie order is being processed...");
}, 1000);
});
}
function sendCookies() {
return new Promise(resolve => {
setTimeout(() => {
resolve("Your cookies have been sent!");
}, 1000);
});
}
async function main() {
const processingMessage = await processOrder();
console.log(sendMessage);
const sendMessage = await sendCookies();
console.log(sendMessage);
} 코드 반환:
Your cookie order is being processed… Your cookies have been sent!
각 단계를 완료하는 데 1,000밀리초가 걸립니다. sendCookies() 함수는 processOrder() 함수의 Promise가 반환될 때까지 실행되지 않습니다.
비동기 표현식
async/await 기능을 사용할 수 있는 세 가지 방법이 있습니다.
첫 번째 방법은 마지막 예제에서 보여준 접근 방식입니다:함수 선언을 통해. 우리의 예에서 우리는 Promise를 반환하는 함수를 선언한 다음 "async" 및 "await" 키워드를 사용하여 해당 함수를 실행했습니다.
화살표 함수를 사용하여 비동기 함수를 선언할 수도 있습니다.
const main = async () => {
const sendMessage = await sendCookies();
console.log(sendMessage);
}
이 코드는 다음을 반환합니다. 쿠키가 전송되었습니다! 첫 번째 예제와 같지만 main() 함수를 선언하는 대신 화살표 함수를 사용했습니다.
마찬가지로 함수 표현식 구문을 사용할 수 있습니다.
const main = async function() {
const sendMessage = await sendCookies();
console.log(sendMessage);
}
이 코드는 다음을 반환합니다. 쿠키가 전송되었습니다! 보시다시피 출력은 다시 한 번 동일합니다. 유일한 차이점은 함수를 선언한 방식입니다.
사실, 이 구문은 마지막 예제와 매우 유사합니다. 화살표 함수를 사용하는 대신 "function()" 키워드를 사용했습니다.
async/await 함수를 선언하는 가장 좋은 방법은 없습니다. 그것은 모두 작성 중인 프로그램과 선호하는 구문에 따라 다릅니다. 화살표 함수가 가장 간결한 방법이라고 주장할 수 있지만 다른 경우에는 async/await 함수를 선언하는 다른 방법이 더 나을 수 있습니다.
Async/Await를 사용하여 웹 요청 처리
async/await 함수의 가장 일반적인 용도 중 하나는 fetch()와 같은 Promise 기반 API를 사용하여 웹 요청을 처리하는 것입니다. JavaScript 가져오기에 대한 초보자 가이드에서 fetch() 함수를 사용하는 방법에 대해 자세히 알아볼 수 있습니다.
다음 예를 고려하십시오.
async function retrieveComments() {
const res = await fetch('https://jsonplaceholder.typicode.com/comments');
var comments = await res.json();
comments = comments.map(comment => comment.name);
console.log(comments);
}
retrieveComments(); 코드 반환:
["id labore ex et quam laborum", "quo vero reiciendis velit similique earum" …]
retrieveComments() 함수를 실행할 때 "await" 키워드를 사용하여 fetch() 문이 실행될 때까지 기다립니다. 이것은 웹 요청이 처리될 때까지 프로그램의 나머지 부분이 계속되지 않는다는 것을 의미합니다. fetch() 함수가 Promise를 반환하기 때문입니다.
fetch() 함수에 의해 Promise가 반환되면 반환된 값을 JSON으로 변환합니다. 그런 다음 개체를 매핑하여 모든 주석의 이름 목록을 검색하고 해당 목록을 콘솔에 인쇄합니다.
오류 처리 방법
오, 코드에서 오류가 발생하지 않았으면 하는 바램입니다. 하지만 그들은 그렇게 하고 있으며, 이는 우리 개발자들이 계획해야 하는 것입니다. 비동기 함수에서 오류 처리는 try...catch 문을 사용하여 동기적으로 수행됩니다. 다음 코드를 고려하십시오.
async function retrieveCookies() {
const res = await fetch('https://thisapidoesnotexist.app/cookies');
var cookieNames = await res.json();
cookieNames = cookieNames.map(cookie => cookie.name);
resolve(cookieNames);
}
async function printCookies() {
const cookies = await retrieveCookies();
console.log(cookies);
}
printCookies().catch(res => console.log(res.message)); 코드 반환:
NetworkError when attempting to fetch resource. While our code is functional, the API we are trying to access does not exist. This means that our Promise cannot return any data, so it instead returns a rejected Promise.
이 예에서는 .catch() 문을 사용하여 반환된 경우 함수에서 반환된 오류를 인쇄했습니다. 이 경우 오류가 발생했음을 코드에 알리기 위해 reject('Error')를 사용합니다.
이 문이 실행되면 .catch() 문이 실행되어 해당 오류를 인쇄합니다.
마찬가지로 비동기 함수는 구문 오류를 잡을 수 있습니다.
async function retrieveCookies() {
const res = await fetch('https://thisapidoesnotexist.app/cookies');
var cookieNames = await res.json();
cookieNames = cookieNames.map(cookie => cookie.name);
resolve(cookieNames);
}
async function printCookies() {
try {
const cookies = await retrieveCookies();
console.log(cookies);
} catch(error) {
console.log(error);
}
}
printCookies(); 우리 코드는 리소스를 가져오려고 할 때 NetworkError를 반환합니다. 이 예제에서는 try/catch 문을 사용하여 wait 메서드가 성공적인 Promise를 반환했는지 확인했습니다. 다시 말하지만 API가 유효하지 않아 프로그램이 약속을 거부합니다. 이런 일이 발생하면 try/catch 블록의 "catch" 문이 실행되어 콘솔에 오류를 기록합니다.
결론
Async/await 함수는 코드에서 비동기 작업을 작성하는 데 도움이 됩니다. 비동기 함수가 선언되면 "await" 키워드를 사용하여 작업이 해결될 때까지 기다릴 수 있습니다. await 키워드는 약속을 반환하는 함수와 함께 사용해야 합니다.
이제 전문가처럼 async/await JavaScript 기능을 사용할 준비가 되었습니다!