JavaScript로 Async/Await 익히기: 종합 가이드-JS 튜토리얼-php.cn

JavaScript로 Async/Await 익히기: 종합 가이드

Susan Sarandon

풀어 주다： 2024-11-28 10:56:10

원래의

514명이 탐색했습니다.

Mastering Async/Await in JavaScript: A Comprehensive Guide

1. 비동기/대기란 무엇입니까?

1.1 비동기 자바스크립트 이해하기

비동기 프로그래밍을 사용하면 JavaScript가 메인 스레드를 차단하지 않고 작업을 수행할 수 있습니다. 이는 API 호출, 파일 작업 또는 장기 실행 프로세스와 같은 작업에 중요합니다. 기존 JavaScript 코딩에서는 이러한 비동기 작업을 처리하기 위해 콜백이나 약속이 사용되었습니다.

1.2 약속의 역할

약속은 현재 또는 미래에 사용할 수 있거나 전혀 사용할 수 없는 가치를 나타냅니다. 콜백에 대한 더 깔끔한 대안을 제공하므로 개발자는 보다 관리하기 쉬운 코드를 작성할 수 있습니다. 그러나 깊게 중첩된 Promise를 처리하면 코드가 복잡하고 읽기 어려울 수 있습니다.

1.3 비동기 함수 소개

비동기 함수는 비동기 코드 작성을 단순화합니다. 비동기 함수는 항상 약속을 반환하므로 개발자는 약속이 해결될 때까지 실행을 일시 중지하는 대기 키워드를 사용하여 동기식으로 보이는 코드를 작성할 수 있습니다.

2. 비동기 기능 분석

2.1 비동기 함수 만들기

비동기 함수를 만들려면 함수 선언 앞에 async 키워드를 사용하면 됩니다. 예:

async function fetchData() {
   // Your code here
}

로그인 후 복사

2.2 비동기 함수의 동작

비동기 함수는 약속을 반환합니다. 이는 호출자가 .then() 및 .catch()를 사용하여 이를 처리할 수 있음을 의미합니다. 비동기 함수에서 오류가 발생하면 약속이 거부됩니다.

2.3 약속 반환 유형

모든 비동기 함수는 자동으로 Promise를 반환합니다. Promise가 아닌 값이 반환되면 Promise로 래핑됩니다.

3. 대기 키워드

3.1 약속과 함께 Wait 사용하기

await 키워드는 비동기 함수 내에서만 사용할 수 있습니다. Promise가 해결되거나 거부될 때까지 비동기 기능의 실행을 일시 중지합니다.

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

로그인 후 복사

3.2 비동기 호출 연결

await를 사용하여 여러 비동기 호출을 연결할 수 있으므로 코드가 더욱 깔끔하고 이해하기 쉬워집니다.

3.3 다중 약속 처리하기

여러 Promise를 처리할 때 Promise.all()을 Wait와 함께 사용하여 모든 Promise가 해결될 때까지 기다릴 수 있습니다.

async function fetchAllData() {
    const [data1, data2] = await Promise.all([fetch(url1), fetch(url2)]);
    // Process data1 and data2
}

로그인 후 복사

4. Async/Await 오류 처리

4.1 Try/Catch 블록

비동기 함수의 오류를 처리하려면 wait/catch 블록에 호출을 래핑하세요.

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}

로그인 후 복사