자바스크립트에서 비동기를 사용하는 방법

웹 애플리케이션이 더욱 복잡해짐에 따라 비동기 프로그래밍이 점점 더 중요해지고 있습니다. JavaScript에서는 async/await 키워드를 사용하여 비동기 작업을 관리할 수 있습니다. 이 기사에서는 비동기의 기본 사용법을 소개하고 이해를 돕기 위해 몇 가지 예를 제공합니다.

비동기란 무엇인가요?

비동기 함수는 ES6에 도입된 새로운 비동기 프로그래밍 방법입니다. async 키워드는 JavaScript 함수를 비동기 함수로 전환하여 함수가 Promise 객체를 반환하도록 하고 비동기 작업을 처리할 때 더 간결하고 명확하게 만듭니다. 비동기 함수는 Promise가 완료될 때까지 비동기 함수의 실행을 일시 중지하는 wait 키워드와 함께 사용되는 경우가 많습니다.

async 함수의 구문은 다음과 같습니다.

async function functionName() {
    //异步操作
}

Using async

async 함수를 사용할 때는 일반적으로 Promise 객체를 조합하여 사용해야 합니다. 예를 들어, 원격 데이터를 가져오려면 fetch 함수를 사용할 수 있습니다.

async function fetchData() {
    const response = await fetch('http://example.com/data');
    const data = await response.json();
    return data;
}

위 코드에서는 fetchData라는 비동기 함수를 만들고 fetch 함수를 사용하여 원격 요청을 시작합니다. 가져오기 함수는 비동기 작업이므로 Promise 객체가 완료될 때까지 기다리려면 wait 키워드를 사용해야 합니다. 구조 분해 할당을 사용하여 얻은 데이터를 변수 data에 저장하고 Wait에서 반환된 Promise가 완료된 후 반환할 수 있습니다.

여러 Promise 처리

여러 Promise 객체를 처리해야 하는 경우 Promise.all() 메서드를 사용할 수 있습니다. Promise.all() 메서드는 Promise 객체를 Promise 객체로 결합하고 모든 Promise 객체가 성공할 때 각 Promise 객체의 결과가 포함된 배열을 반환합니다. Promise 객체 중 하나라도 실패하면 이 메서드는 실패한 Promise 객체를 즉시 반환하고 더 이상 처리되지 않은 Promise 객체를 기다리지 않습니다.

예를 들어, 두 개의 원격 데이터 소스에서 동시에 데이터를 가져오고 둘 다 얻은 후 작업하려는 경우 다음과 같이 작동할 수 있습니다.

async function fetchData() {
    const [data1, data2] = await Promise.all([(async () => {
        const response = await fetch('http://example.com/data1');
        return response.json();
    })(), (async () => {
        const response = await fetch('http://example.com/data2');
        return response.json();
    })()]);
    console.log(data1, data2);
}

위 코드에서 fetchData 비동기 함수라는 파일을 만듭니다. , Promise.all() 메서드를 사용하여 두 개의 원격 데이터 소스에서 데이터를 기다립니다. 우리는 자체 실행 함수와 async/await 키워드를 사용하여 두 개의 데이터 소스를 검색하고 이를 Promise 객체 배열로 구성했습니다. 두 데이터 소스의 데이터가 완전히 구문 분석되면 이를 data1 및 data2 변수에 저장하고 콘솔에 간단한 로깅을 수행합니다.

오류 처리

비동기 함수에서 오류를 처리할 때 일반적으로 try/catch 문을 사용합니다. 비동기 함수는 Promise 객체를 반환하므로 예외가 발생하면 반환된 Promise 객체는 거부됩니다. catch 블록에서 이 예외를 포착하고 처리할 수 있습니다.

예를 들어 아래와 같이 네트워크 요청이 실패하는 예외가 발생할 수 있습니다.

async function fetchData() {
    try {
        const response = await fetch('http://example.com/data');
        const data = await response.json();
        return data;
    } catch (error) {
        console.error(error);
    }
}

위 코드에서는 fetchData라는 비동기 함수를 만들고 try/catch 문을 사용하여 네트워크 요청 실패 예외를 처리했습니다. 요청이 성공하면 데이터를 변수 data에 저장하고 반환합니다. 그렇지 않으면 오류를 콘솔에 인쇄합니다.

결론

async/await 키워드는 JavaScript가 비동기 프로그래밍을 관리하는 편리한 방법입니다. async/await를 사용하면 더 쉽게 읽고 이해할 수 있는 깔끔한 코드가 생성됩니다. 여러 비동기 작업을 관리하거나 오류를 처리해야 하는 경우 Promise 및 try/catch 문을 사용하여 이를 달성할 수도 있습니다. 이 기사가 도움이 되기를 바랍니다!

위 내용은 자바스크립트에서 비동기를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!