JavaScript의 비동기 및 대기-JS 튜토리얼-php.cn

JavaScript의 비동기 및 대기

Linda Hamilton

풀어 주다： 2025-01-10 14:30:42

원래의

451명이 탐색했습니다.

Async and Await In JavaScript

비동기 JavaScript 소개

JavaScript는 단일 스레드이므로 한 번에 하나의 작업만 실행할 수 있습니다. 여러 작업, 특히 API 요청이나 파일 읽기와 같은 I/O 작업을 처리하기 위해 JavaScript는 비동기 프로그래밍을 사용합니다. 이를 통해 장기 실행 작업이 완료될 때까지 기다리는 동안 다른 작업을 계속 실행할 수 있습니다.

콜백 함수

처음에는 JavaScript의 비동기 작업이 콜백 함수를 사용하여 처리되었습니다. 콜백은 다른 함수에 인수로 전달되어 작업이 완료된 후 실행되는 함수입니다.

예:

function fetchData(callback) {
    setTimeout(() => {
        callback('Data fetched');
    }, 2000);
}

fetchData((message) => {
    console.log(message);
});

로그인 후 복사

약속

비동기 작업을 보다 효과적으로 처리하기 위해 Promise가 도입되었습니다. 약속은 현재 또는 미래에 사용할 수 있거나 전혀 사용할 수 없는 값을 나타냅니다.

예:

let promise = new [Promise]((resolve, reject) => {
    setTimeout(() => {
        resolve('Data fetched');
    }, 2000);
});

promise.then((message) => {
    console.log(message);
}).catch((error) => {
    console.error(error);
});

로그인 후 복사

비동기/대기

Async/Await는 Promise를 기반으로 구축된 구문 설탕으로, 비동기 코드를 동기 코드처럼 보이고 동작하게 만듭니다. 이렇게 하면 코드를 더 쉽게 읽고 이해할 수 있습니다.

기본 사용법

비동기 함수: async 키워드로 선언된 함수는 Promise를 반환합니다.
Await 키워드: Wait 키워드는 비동기 함수 내에서만 사용할 수 있습니다. Promise가 해결되거나 거부될 때까지 JavaScript를 기다리게 합니다.

예:

async function fetchData() {
    let promise = new Promise((resolve, reject) => {
        setTimeout(() => resolve('Data fetched'), 2000);
    });

    let result = await promise; // Wait until the promise resolves
    console.log(result);
}

fetchData();

로그인 후 복사

오류 처리

async/await에서는 try...catch 블록을 사용하여 오류 처리가 간단해집니다.

예:

async function fetchData() {
    try {
        let promise = new Promise((resolve, reject) => {
            setTimeout(() => reject('Error fetching data'), 2000);
        });

        let result = await promise;
        console.log(result);
    } catch (error) {
        console.error(error);
    }
}

fetchData();

로그인 후 복사

병렬 실행

여러 비동기 작업을 병렬로 실행하려면 Promise.all을 async/await와 함께 사용할 수 있습니다.

예:

async function fetchAllData() {
    let promise1 = new Promise((resolve) => setTimeout(() => resolve('Data 1'), 2000));
    let promise2 = new Promise((resolve) => setTimeout(() => resolve('Data 2'), 1000));

    let results = await Promise.all([promise1, promise2]);
    console.log(results); // ['Data 1', 'Data 2']
}

fetchAllData();

로그인 후 복사

고급 개념

순차적 실행

작업을 순차적으로 실행해야 하는 경우 차례로 대기를 사용하세요.

예:

async function fetchSequentialData() {
    let data1 = await new Promise((resolve) => setTimeout(() => resolve('Data 1'), 2000));
    console.log(data1);

    let data2 = await new Promise((resolve) => setTimeout(() => resolve('Data 2'), 1000));
    console.log(data2);
}

fetchSequentialData();

로그인 후 복사

Async/Await와 기존 Promise의 결합

async/await와 then과 같은 전통적인 Promise 메서드를 결합하여 catch할 수 있습니다.

예:

async function fetchData() {
    let data = await fetch('https://api.example.com/data');
    return data.json();
}

fetchData().then((data) => {
    console.log(data);
}).catch((error) => {
    console.error(error);
});

로그인 후 복사