더 부드러운 코드를 위한 JavaScript의 비동기 트릭-JS 튜토리얼-php.cn

더 부드러운 코드를 위한 JavaScript의 비동기 트릭

Mary-Kate Olsen

풀어 주다： 2024-10-22 14:28:02

원래의

529명이 탐색했습니다.

JavaScript의 세계를 탐색하면서 반응형 웹 애플리케이션을 구축하려면 JavaScript의 비동기 특성을 이해하는 것이 중요합니다. 약속은 훌륭한 도구이지만 더 복잡한 시나리오에서는 부족한 경우가 많습니다. 이 게시물에서는 JavaScript 기술을 향상시켜 줄 고급 비동기 패턴을 자세히 살펴보겠습니다.

비동기 제어를 위한 생성기와 수율

생성기는 실행을 일시 중지하고 중간 결과를 반환할 수 있는 특수한 유형의 함수입니다. 이는 비동기 흐름을 제어하는 데 특히 유용할 수 있습니다.

예:

function* asyncGenerator() {
    const data1 = yield fetchData1(); // Pause until data1 is available
    const data2 = yield fetchData2(data1); // Pause until data2 is available
    return processData(data1, data2); // Final processing
}

const generator = asyncGenerator();

async function handleAsync() {
    const result1 = await generator.next(); // Fetch first data
    const result2 = await generator.next(result1.value); // Fetch second data
    const finalResult = await generator.next(result2.value); // Process final result
    console.log(finalResult.value);
}

handleAsync();

로그인 후 복사

비동기 반복자

비동기 반복자를 사용하면 비동기 데이터 스트림을 효율적으로 처리할 수 있으므로 기본 스레드를 차단하지 않고 데이터가 도착하는 대로 처리할 수 있습니다.

예:

async function* fetchAPIData(url) {
    const response = await fetch(url);
    const data = await response.json();

    for (const item of data) {
        yield item; // Yield each item as it arrives
    }
}

async function processAPIData() {
    for await (const item of fetchAPIData('https://api.example.com/data')) {
        console.log(item); // Process each item as it comes
    }
}

processAPIData();

로그인 후 복사

Promise.allSettled를 사용한 동시성

Promise.allSettled를 사용하면 결과(해결 또는 거부)에 관계없이 모든 Promise가 확정될 때까지 기다릴 수 있습니다. 이는 여러 비동기 작업의 결과에 따라 작업을 수행하려는 시나리오에 유용합니다.

예:

const promise1 = Promise.resolve(1);
const promise2 = Promise.reject(new Error('Failed'));
const promise3 = Promise.resolve(3);

Promise.allSettled([promise1, promise2, promise3]).then((results) => {
    results.forEach((result) => {
        if (result.status === 'fulfilled') {
            console.log('Result:', result.value);
        } else {
            console.error('Error:', result.reason);
        }
    });
});

로그인 후 복사

웹 작업자

Web Worker는 백그라운드 스레드에서 JavaScript를 실행하는 방법을 제공하므로 UI를 정지하지 않고도 CPU 집약적인 작업을 처리할 수 있습니다. 이는 애플리케이션에서 원활한 사용자 경험을 유지하는 데 중요합니다.

예:

// worker.js
self.onmessage = function(e) {
    const result = heavyComputation(e.data); // Perform heavy computation
    self.postMessage(result); // Send the result back to the main thread
};

// main.js
const worker = new Worker('worker.js');

worker.onmessage = function(e) {
    console.log('Result from worker:', e.data);
};

// Start the worker with data
worker.postMessage(inputData);

로그인 후 복사

마지막에

이러한 고급 비동기 패턴을 익히면 더욱 효율적이고 유지 관리가 가능하며 반응성이 뛰어난 JavaScript 코드를 작성할 수 있습니다. Generators, Async Iterators, Promise.allSettled 및 Web Workers를 통합하면 애플리케이션의 성능과 사용자 경험을 크게 향상시킬 수 있습니다. 이러한 기술을 받아들이고 JavaScript 기술이 향상되는 것을 지켜보세요!

내 개인 웹사이트: https://shafayet.zya.me

당신을 위한 밈이 있나요?

Async Tricks in JavaScript for Smoother Code