비동기/대기 마스터하기: JavaScript에서 비동기 함수 체인 처리

비동기/대기: 비동기 JavaScript 호출에서 직접 대기 없이 지속 보장

최신 JavaScript를 사용하는 프런트엔드 솔루션(async/await 포함)

// Solution 1: Using async/await with Promises in JavaScript
async function functionFirst() {
  console.log('First is called');
  setTimeout(functionSecond, 1000);
  console.log('First fired Second and does not wait for its execution');
  return new Promise(resolve => {
    setTimeout(resolve, 2000); // Set timeout for the entire chain to complete
  });
}

function functionSecond() {
  console.log('Second is called');
  setTimeout(functionLast, 1000);
}

function functionLast() {
  console.log('Last is called');
}

async function functionMain() {
  await functionFirst();
  console.log('called First and continue only after Last is done');
}

functionMain();

비차단 흐름을 위한 콜백을 사용하여 비동기 체인 처리

일반 JavaScript에서 콜백 함수를 사용하는 프런트엔드 접근 방식

// Solution 2: Using Callbacks to Manage Asynchronous Flow Without Blocking
function functionFirst(callback) {
  console.log('First is called');
  setTimeout(() => {
    functionSecond(callback);
  }, 1000);
  console.log('First fired Second and does not wait for its execution');
}

function functionSecond(callback) {
  console.log('Second is called');
  setTimeout(() => {
    functionLast(callback);
  }, 1000);
}

function functionLast(callback) {
  console.log('Last is called');
  callback();
}

function functionMain() {
  functionFirst(() => {
    console.log('called First and continue only after Last is done');
  });
}

functionMain();

비동기 흐름에 대한 전체 제어를 위해 이벤트 이미터 사용

비동기 흐름 제어를 위해 Node.js 및 이벤트 이미터를 사용하는 백엔드 접근 방식

// Solution 3: Using Node.js EventEmitter to Handle Asynchronous Functions
const EventEmitter = require('events');
const eventEmitter = new EventEmitter();

function functionFirst() {
  console.log('First is called');
  setTimeout(() => {
    eventEmitter.emit('secondCalled');
  }, 1000);
  console.log('First fired Second and does not wait for its execution');
}

function functionSecond() {
  console.log('Second is called');
  setTimeout(() => {
    eventEmitter.emit('lastCalled');
  }, 1000);
}

function functionLast() {
  console.log('Last is called');
}

eventEmitter.on('secondCalled', functionSecond);
eventEmitter.on('lastCalled', functionLast);

function functionMain() {
  functionFirst();
  eventEmitter.on('lastCalled', () => {
    console.log('called First and continue only after Last is done');
  });
}

functionMain();

Async/Await 및 비동기 함수에 대한 일반적인 질문

1. 차이점은 무엇 입니까? async/await 그리고 Promises?
2. async/await 위에 구축된 구문 설탕입니다. Promises, 더 깔끔하고 읽기 쉬운 비동기 코드를 허용합니다. 체인으로 묶는 대신 .then(), 당신은 사용 await 까지 함수 실행을 일시 중지합니다. Promise 해결합니다.
3. 섞어도 될까요 async/await 그리고 callbacks?
4. 예, 동일한 코드베이스에서 둘 다 사용할 수 있습니다. 그러나 콜백 함수가 다음과 충돌하지 않는지 확인하는 것이 중요합니다. Promises 또는 async/await 예상치 못한 동작이 발생할 수 있습니다.
5. 오류를 어떻게 처리합니까? async 기능?
6. 당신은 포장 할 수 있습니다 await 내부에서 호출 try/catch 비동기 실행 중에 발생하는 모든 오류를 포착하여 앱이 계속해서 원활하게 실행되도록 합니다.
7. 의 역할은 무엇입니까? EventEmitter 비동기 코드에서?
8. 그만큼 EventEmitter 사용자 정의 이벤트를 내보내고 이를 수신할 수 있어 Node.js에서 여러 비동기 작업을 처리하는 구조화된 방법을 제공합니다.
9. 사용하지 않으면 어떻게 되나요? await 에 async 기능?
10. 사용하지 않는 경우 await, 함수는 기다리지 않고 계속 실행됩니다. Promise 해결하기 위해 잠재적으로 예측할 수 없는 결과가 발생할 수 있습니다.

JavaScript의 비동기 흐름 제어에 대한 최종 생각

비동기 흐름을 관리하는 것은 어려울 수 있으며, 특히 함수가 서로 트리거할 때 더욱 그렇습니다. Promise와 함께 async/await를 사용하면 불필요한 차단 없이 프로그램이 원활하게 실행되도록 하여 함수 체인이 완료될 때까지 기다려야 하는 상황에 이상적입니다.

이벤트 기반 접근 방식이나 콜백을 통합하면 서버 요청 관리 또는 복잡한 프로세스 처리와 같은 특정 사용 사례에 대한 제어 수준이 더 높아집니다. 이러한 기술을 결합하면 개발자는 여러 비동기 작업을 처리하는 경우에도 효율적이고 반응이 빠른 애플리케이션을 만들 수 있습니다.