logo

TechCodeview

JavaScript의 비동기 및 대기

JavaScript의 Async 및 Await는 Promise를 사용하여 비동기 작업을 처리하는 데 사용되는 강력한 키워드입니다. Async 함수는 암시적으로 Promise를 반환하는 반면 Await는 Promise가 해결될 때까지 실행을 일시 중지합니다. 이는 비동기 코드를 단순화하고 동기 코드로 나타나게 하여 가독성을 향상시킵니다.

비동기 기능

그만큼async>함수를 사용하면 마치 동기식인 것처럼 Promise 기반 코드를 작성할 수 있습니다. 이렇게 하면 실행 스레드가 차단되지 않습니다.



  • 약속 처리 : 비동기 함수는 항상 Promise를 반환합니다. Promise가 아닌 값이 반환되면 JavaScript는 자동으로 이를 해결된 Promise로 래핑합니다.

비동기 구문

async function myFunction() { return 'Hello'; }>

예: 여기서는 JavaScript에서 비동기의 기본 사용법을 살펴보겠습니다.

자바스크립트 
const getData = async () =>{ let data = 'Hello World';  데이터를 반환합니다. } getData().then(data => console.log(data));>
산출 
Hello World>

키워드를 기다립니다

그만큼await>키워드는 약속이 해결될 때까지 기다리는 데 사용됩니다. 비동기 블록 내에서만 사용할 수 있습니다.

  • 실행 일시 중지 : Await는 Promise가 결과를 반환할 때까지 코드를 기다리게 하여 더 깔끔하고 관리하기 쉬운 비동기 코드를 허용합니다.

통사론 



let value = await promise;>

예 : 이 예는 JavaScript에서 Wait 키워드의 기본 사용법을 보여줍니다.

자바스크립트 
const getData = async () =>{ y = 'Hello World'를 기다리세요;  console.log(y); } console.log(1); getData(); console.log(2);>
산출 
1 2 Hello World>

그만큼 비동기 키워드는 일반 JavaScript 함수를 비동기 함수로 변환하여 Promise를 반환하도록 합니다.

그만큼 기다리다 키워드는 비동기 함수 내에서 실행을 일시 중지하고 계속하기 전에 Promise가 해결될 때까지 기다리는 데 사용됩니다.



비동기/대기 예

여기서는 메서드에 여러 가지 Promise를 구현한 다음 해당 메서드를 결과를 표시하는 데 사용할 것입니다. JS를 확인할 수 있습니다. 비동기/대기 구문 예에서.

자바스크립트 
function asynchronous_operational_method() {  let first_promise =   new Promise((resolve, reject) =>해결('안녕하세요'));  let second_promise = new Promise((해결, 거부) => { setTimeout(() => { 해결(' Techeduportal..'); }, 1000); });  let Combined_promise = Promise.all([first_promise, second_promise]);  Combined_promise를 반환하십시오; } 비동기 함수 디스플레이() { 데이터하자 = 비동기_작동_방법()을 기다립니다;  console.log(데이터); } 표시하다();>

산출: 

[ 'Hello', ' techcodeview.com..' ]>

설명:

  1. 약속 창조 :
    • 두 가지 약속이 생성됩니다. 하나는 Hello로 즉시 해결되고, 다른 하나는 techcodeview.com로 1초 후에 해결됩니다.
  2. 약속의 결합 :
    • Promise.all() 메서드는 두 Promise를 결합하여 Combined_promise라는 단일 Promise로 결합합니다.
  3. 비동기 기능 :
    • display() 함수는 async로 선언되어 비동기 작업이 포함되어 있음을 나타냅니다.
  4. 약속 해결을 기다리는 중 :
    • wait 키워드는 Combined_promise가 해결될 때까지 실행을 일시 중지합니다.
  5. 로깅 결과 :
    • Combined_promise에서 확인된 배열이 콘솔에 기록됩니다.

메모

에게 해결하다 그리고 거부하다 JavaScript에 의해 사전 정의된 인수입니다.

  • Resolve 함수는 비동기 작업이 완료되어 결과를 반환할 때 사용됩니다.
  • Reject 함수는 비동기 작업이 실패하고 실패 이유를 반환할 때 사용됩니다.

Async 및 Wait의 장점

  1. 가독성 향상 : Async 및 Await를 사용하면 비동기 코드를 동기 스타일로 작성할 수 있으므로 읽고 이해하기가 더 쉽습니다.
  2. 오류 처리 : async/await와 함께 try/catch 블록을 사용하면 오류 처리가 간단해집니다.
  3. 콜백 지옥을 피함 : Async 및 Await는 중첩된 콜백과 복잡한 약속 체인을 피하는 데 도움이 됩니다.
  4. 더 나은 디버깅 : 비동기/대기 코드 디버깅은 동기 코드처럼 동작하므로 더 직관적입니다.

결론

JavaScript의 Async 및 Await는 코드를 더 읽기 쉽고 유지 관리하기 쉽게 만들어 비동기 프로그래밍에 혁명을 일으켰습니다. 비동기 코드를 동기 스타일로 작성할 수 있도록 함으로써 콜백 및 Promise Chaining과 관련된 복잡성을 줄입니다. 비동기 및 대기를 효과적으로 이해하고 사용하면 JavaScript 프로그래밍 기술이 크게 향상되어 프로젝트에서 비동기 작업을 더 쉽게 처리할 수 있습니다.

지원되는 브라우저:

JS가 지원하는 브라우저 비동기/대기 기능 아래에 나열되어 있습니다:

  • Google 크롬 55 이상
  • 파이어폭스 52 이상
  • 애플 사파리 10.1 이상
  • 오페라 42 이상
  • 엣지 14 이상