Javascript의 비동기 프로그래밍

JavaScript는 단일 스레드 언어이므로 한 번에 하나의 작업만 처리할 수 있습니다. 스크립트가 완료될 때까지 다른 작업을 실행하지 못하도록 차단되므로 복잡한 작업에 대한 대기 시간이 길어질 수 있습니다. 이 문제를 해결하기 위해 JavaScript는 비동기 작업이 완료되기를 기다리는 동안 스크립트가 다른 작업을 계속 실행할 수 있도록 하는 비동기 프로그래밍을 제공합니다. 이 블로그에서는 JavaScript의 비동기 프로그래밍의 기본 사항과 콜백 함수, Promise 및 async/await를 사용하여 이를 달성할 수 있는 방법을 살펴보겠습니다.

콜백 함수

콜백 함수는 다른 함수에 인수로 전달되어 메인 함수가 완료된 후 실행되는 함수입니다. 콜백은 비동기 프로그래밍에서 다음 단계를 실행하기 전에 작업이 완료될 때까지 기다리는 데 사용됩니다.

예를 들어 다음 코드를 살펴보세요.

function slowTask(callback) {
  setTimeout(() => {
    console.log("Slow task completed.");
    callback();
  }, 1000);
}

function runProgram() {
  console.log("Program started.");
  slowTask(() => {
    console.log("Callback function executed.");
  });
  console.log("Program ended.");
}

runProgram();

이 예에서 SlowTask 함수는 콜백을 인수로 사용합니다. SlowTask 함수는 setTimeout을 사용하여 작업 실행을 1초 동안 지연합니다. runProgram 함수는 SlowTask를 호출하고 콜백 함수를 인수로 전달합니다. runProgram 함수는 "프로그램 시작" 및 "프로그램 종료"도 기록합니다. SlowTask 함수가 완료되면 "Slow task done"을 로그에 기록하고, 콜백 함수를 실행하여 "콜백 함수 실행됨"을 로그합니다.
출력은 다음과 같습니다.

Program started.
Program ended.
Slow task completed.
Callback function executed.

약속

Promise는 JavaScript의 비동기 프로그래밍에 대한 보다 현대적인 접근 방식입니다. Promise는 비동기 작업의 결과를 나타내며 보류, 이행 또는 거부의 세 가지 상태 중 하나일 수 있습니다. Promise 생성자를 사용하여 Promise를 생성할 수 있으며 then 및 catch 메소드를 사용하여 해당 상태를 확인할 수 있습니다.

예:

const slowTask = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Slow task completed.");
  }, 1000);
});

function runProgram() {
  console.log("Program started.");
  slowTask
    .then((result) => {
      console.log(result);
    })
    .catch((error) => {
      console.error(error);
    });
  console.log("Program ended.");
}

runProgram();

이 예에서 SlowTask는 1초 후에 "느린 작업 완료"라는 결과로 해결되는 약속입니다. runProgram 함수는 SlowTask를 호출하고 then 메소드를 사용하여 약속이 이행될 때 결과를 기록합니다.

The output will be:
Program started.
Program ended.
Slow task completed.

비동기/대기

Async/await는 JavaScript에서 비동기 작업을 처리하는 가장 읽기 쉬운 최신 방법입니다. 이를 통해 개발자는 동기 코드처럼 보이는 비동기 코드를 작성할 수 있으므로 이해하고 유지 관리하기가 더 쉽습니다. async 키워드는 비동기 함수를 선언하는 데 사용되며, wait 키워드는 약속이 해결될 때까지 기다리는 데 사용됩니다.

다음은 JavaScript에서 async/await 사용을 보여주는 예입니다.

async function fetchData() {
  const response = await fetch("https://api.example.com/data");
  const data = await response.json();
  console.log(data);
}

fetchData();

이 예에서 fetchData 함수는 async 키워드를 사용하여 비동기식으로 선언됩니다. 이 함수는 가져오기를 사용하여 API에서 데이터를 검색하고, 대기는 가져오기 작업이 완료될 때까지 기다리는 데 사용됩니다. 그런 다음 해결된 응답은 response.json()을 사용하여 JSON 개체로 변환됩니다. wait 키워드는 JSON 변환이 완료될 때까지 기다리는 데 사용되며 최종 결과는 콘솔에 기록됩니다.

비동기 함수 내의 코드는 비동기적으로 실행되지만 함수 외부의 코드는 여전히 동기적으로 실행된다는 점에 유의하는 것이 중요합니다. 또한, wait 키워드는 비동기 함수 내에서만 사용할 수 있습니다.

결론적으로 JavaScript의 비동기 프로그래밍을 사용하면 스크립트가 비동기 작업이 완료되기를 기다리는 동안 다른 작업을 계속 실행할 수 있습니다. 콜백 함수, Promise 및 async/await는 JavaScript에서 비동기 프로그래밍을 달성하는 세 가지 방법입니다. 콜백 함수는 비동기 작업을 처리하는 가장 간단하고 기본적인 방법인 반면, Promise는 보다 현대적이고 유연한 접근 방식을 제공합니다. Async/await는 비동기 작업을 처리하는 가장 읽기 쉬운 방법을 제공하며 최신 JavaScript 프로그래밍에 권장되는 방법입니다. JavaScript의 비동기 프로그래밍을 이해하는 것은 효율적이고 반응이 빠른 애플리케이션을 만드는 데 중요하며 모든 JavaScript 개발자에게 꼭 필요한 기술입니다.

위 내용은 Javascript의 비동기 프로그래밍의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!