다른 프로그래밍 언어에서 온 엔지니어 또는 개발자라면 sleep()라는 기본 메서드를 사용했을 것입니다. 메서드 실행을 중단하거나 일시 중지합니다. JavaScript에는 그러한 기본 메소드가 없습니다.
이 기사에서는 JavaScript를 사용하여 절전 기능을 시뮬레이션할 수 있는 두 가지 방법인 Promises 및 async/await 기능에 대해 설명합니다.
비동기 함수 소개
setTimeout()을 먼저 언급하지 않고 JavaScript의 Promises 또는 async/await 함수에 대해 이야기해서는 안 됩니다. 방법을 간략하게. 이 메서드는 JavaScript에서 Promise가 필요한 이유를 보여줍니다.
JavaScript는 단일 스레드입니다.
JavaScript가 단일 스레드 언어라고 말할 때 JavaScript에는 하나의 호출 스택과 하나의 메모리 힙만 있다는 의미입니다. 높은 수준에서 이것은 JavaScript가 한 번에 한 줄씩 순서대로 코드를 읽고 다음 줄로 이동하기 전에 코드 조각을 실행해야 함을 의미합니다. 이것은 본질적으로 JavaScript를 동기적으로 만듭니다. 때때로 코드를 비동기식으로 만들기 위해 해결 방법이 필요합니다.
동기 코드와 비동기 코드
이 예를 살펴보십시오.
//synchronous
console.log("This will print first")
console.log("This will print second")
console.log("This will print third");
아주 간단하죠? JavaScript가 연속적으로 실행하기 때문에 각 console.logs는 연속적으로 인쇄됩니다.
2행이 3행보다 먼저 인쇄되기를 원한다고 가정해 봅시다. 본질적으로 어떻게 console.log를 인쇄할 수 있습니까? 차례대로? setTimeout()으로 할 수 있습니다. :
//setTimeout
console.log("This will print first")
setTimeout(() => {
console.log("This will print third")
}, 1000);
console.log("This will print second");
setTimeout() 다른 코드가 실행될 수 있도록 스레드를 차단하지 않고 JavaScript 기능을 실행할 수 있습니다. 첫 번째 인수는 설정된 시간(두 번째 인수) 후에 실행되는 콜백 함수입니다. 두 번째 인수는 밀리초 단위로 표시됩니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
이 setTimeout() 메서드는 다음과 같이 다른 언어에서 기본적으로 사용되는 절전 메서드를 모방합니다.
- 자바스크립트 엔진이
setTimeout()을 실행할 때 백그라운드에서 타이머 설정 기능 - 타이머가 카운트다운할 때 다른 코드를 계속 실행
setTimeout()에서 콜백 함수 실행 타이머가 0에 도달하면
setTimeout() 방법 이해 작동은 Promise와 async/await 함수가 작동하는 방식을 이해하는 데 중요합니다. Promise는 다음에 다루겠습니다.
약속
약속 만들기
Promise는 비동기 논리를 수행하는 방법입니다. Promise 생성자는 resolve와 reject라는 두 개의 매개변수가 있는 콜백 함수를 받습니다. 이 콜백 함수에는 완료되면 전달된 응답으로 확인 또는 거부 함수를 호출하는 논리가 포함됩니다.
console.log("before promise")
let promise = new Promise((resolve, reject) => {
let resolvedFlag = false;
//this is just a flag so we can intentionally throw the response to test logic
console.log("first");
console.log("second")
console.log("third")
console.log("fourth");
resolvedFlag = true; //flip resolved to true once all console logs are done
if(resolvedFlag) { //if resolved is true invoke the resolve function
resolve("Promise resolved");
console.log("after promise");
} else { // else invoke the reject function with a new Error object with message
reject(new Error("Promise failed"));
console.log("after promise");
}
});
여기에 있는 코드 조각은 간단한 약속을 보여줍니다. 약속은 세 가지 상태일 수 있습니다.
대기 중 – 해결되거나 거부되지 않음 – 이것은 약속의 초기 상태입니다.
해결됨 – 성공적인 실행
거부됨 – 실행 오류
위의 코드 조각에서 resolveFlag를 true에서 false로 전환하여 해결된 약속과 거부된 약속의 해결 방법을 보여줍니다.
기억해야 할 주요 사항은 이 Promise에는 Promise가 해결되거나 거부될 때까지 스크립트 실행을 일시 중지하는 함수가 포함되어 있다는 것입니다. 그런 다음 스크립트가 다시 시작됩니다.
약속 응답 사용
Promise의 인스턴스를 시작할 때 then()를 사용합니다. 및 catch() 반환된 Promise에서 응답을 받은 후 사용하려는 논리를 배치합니다. 이것은 하나의 설명으로 구성되어 있습니다. 높은 수준의 개요는 다음과 같습니다.
promise.then(func).catch(func);
then 및 catch 메서드를 호출하는 괄호 안에는 응답이 매개변수로 전달된 익명 함수가 있습니다.
promise // the promise we created above in prev code snippet.
.then(response => { // hits here if successful response
// the logic that happens on successful response
console.log(response);
console.log("after promise");
})
.catch(error => { // catches any errors here.
// the logic that happens on error response
console.log(error.message);
console.log("after promise");
}) Promise는 데이터베이스를 호출하거나 HTTP 요청을 할 때 자주 사용됩니다.
비동기/대기 기능
sleep()를 시뮬레이션할 수 있는 마지막 방법 방법은 async/await 함수를 사용하는 것입니다. 본질적으로 이러한 비동기 함수는 Promises에서 사용하는 것과 동일한 논리를 구성하는 또 다른 방법이지만 코드는 더 적습니다.
async라는 용어 function 앞에 위치 ES6 이전 함수에서는 키워드, ES6+ 함수에서는 매개변수 앞에 둡니다. 계속 진행하기 전에 수행하려는 모든 논리는 이 코드 블록으로 이동합니다.
const firstFunction = () => { // logic that you want to have done asynchronously
let resolved = true;
if(resolved) {
let respObj = { message: "Resolved!"};
return respObj.message;
} else {
let errObj = { message: "Error!"};
return errObj.message;
}
}
const asyncExample = async () => {
// async keyword before where parameters would go
console.log("Calling function...");
let result = await firstFunction();
// await goes before the invocation of the function that contains your logic.
// won't go to the next line until the function is done.
console.log(result);
return result;
}
asyncExample() // invokes the async/await function async/await 함수를 사용하면 거의 동일한 비동기식 약속 기반 프로세스가 생성되지만 더 적은 코드가 사용됩니다.
결론
이 기사에서는 sleep()를 모방하는 방법을 살펴보았습니다. 다른 프로그래밍 언어에 고유한 기능입니다. setTimeout()을 사용했습니다. Promises 및 async/await 함수를 볼 수 있도록 비동기 JavaScript 함수의 개념을 보여줍니다.