JavaScript로 비동기 프로그래밍 마스터하기-JS 튜토리얼-php.cn

JavaScript로 비동기 프로그래밍 마스터하기

Patricia Arquette

풀어 주다： 2024-10-31 09:32:02

원래의

1025명이 탐색했습니다.

Mastering Asynchronous Programming in JavaScript

동기 프로그래밍은 JavaScript의 중요한 개념으로, 메인 스레드를 차단하지 않고도 API 호출, 파일 읽기, 타이머와 같은 작업을 처리할 수 있게 해줍니다. 개념이 처음이거나 이해를 확고히 하고 싶다면 이 게시물을 선택하세요!

비동기 프로그래밍이란 무엇입니까?

동기식 프로그래밍에서는 작업이 차례로 실행되므로 특히 시간이 걸리는 작업(예: 네트워크 요청)을 처리할 때 리소스를 비효율적으로 사용할 수 있습니다. 비동기식 프로그래밍을 사용하면 이러한 작업이 완료되기를 기다리는 동안 코드를 실행할 수 있어 성능과 응답성이 향상됩니다.

주요 개념

콜백
약속
비동기/대기

각 개념을 자세히 살펴보겠습니다.

1. 콜백

콜백은 다른 함수에 인수로 전달되고 작업이 완료되면 실행되는 함수입니다. 간단하지만 중첩된 함수가 있는 경우 콜백은 "콜백 지옥"으로 이어질 수 있습니다.

function fetchData(callback) {
    setTimeout(() => {
        const data = "Data received!";
        callback(data);
    }, 1000);
}

fetchData((data) => {
    console.log(data); // Output: Data received!
});

로그인 후 복사

**2. 약속
**프라미스는 콜백에 대한 더 깔끔한 대안을 제공합니다. Promise는 현재 또는 미래에 사용할 수 있거나 전혀 사용할 수 없는 값을 나타냅니다. 보류, 이행 또는 거부의 세 가지 상태 중 하나일 수 있습니다.

Promise를 사용하는 방법은 다음과 같습니다.

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = "Data received!";
            resolve(data); // or reject(error);
        }, 1000);
    });
}

fetchData()
    .then((data) => {
        console.log(data); // Output: Data received!
    })
    .catch((error) => {
        console.error(error);
    });

로그인 후 복사

**3. 비동기/대기

ES2017에 도입된 async 및 Wait는 Promise 작업을 위한 더 읽기 쉬운 방법을 제공합니다. 함수를 비동기로 정의하고 해당 함수 내에서 약속이 해결될 때까지 실행을 일시 중지하기 위해 대기를 사용할 수 있습니다.

async function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("Data received!");
        }, 1000);
    });
}

async function getData() {
    try {
        const data = await fetchData();
        console.log(data); // Output: Data received!
    } catch (error) {
        console.error(error);
    }
}

getData();

로그인 후 복사

오류 처리

비동기 코드로 작업할 때는 적절한 오류 처리가 필수적입니다. Promise의 경우.catch()를 사용할 수 있고, async/await의 경우 try/catch 블록을 사용할 수 있습니다.

실제 사례

이것을 맥락에 맞게 살펴보겠습니다. 다음은 Promise를 반환하는 가져오기를 사용하여 API에서 데이터를 가져오는 예입니다.

async function fetchUserData(userId) {
    try {
        const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
        if (!response.ok) {
            throw new Error("Network response was not ok");
        }
        const userData = await response.json();
        console.log(userData);
    } catch (error) {
        console.error("Fetch error:", error);
    }
}

fetchUserData(1);

로그인 후 복사