JavaScript में index.html पेज से एसिंक्रोनस कोड कैसे कॉल करें?

HTML में async/await के साथ body onload या DOMContentLoaded इवेंट का उपयोग करके एसिंक्रोनस फंक्शन कॉल करें।

मॉडर्न दृष्टिकोण: DOMContentLoaded (अनुशंसित)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Async लोड</title>
</head>
<body>
    <div id="app">लोड हो रहा है...</div>

    <script>
        // एसिंक्रोनस फंक्शन
        async function fetchData() {
            try {
                const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
                const data = await response.json();
                return data;
            } catch (error) {
                console.error('त्रुटि:', error);
                return null;
            }
        }

        // पेज लोड होने पर कॉल करें
        document.addEventListener('DOMContentLoaded', async () => {
            console.log('पेज लोडेड, डेटा ला रहे हैं...');
            const data = await fetchData();
            
            if (data) {
                document.getElementById('app').innerHTML = `
                    <h2>${data.title}</h2>
                    <p>${data.body}</p>
                `;
            }
        });
    </script>
</body>
</html>

विकल्प: IIFE (तुरंत आमंत्रित फंक्शन एक्सप्रेशन)

<script>
    // टॉप-लेवल await के लिए IIFE (मॉड्यूल में टॉप-लेवल await उपलब्ध)
    (async () => {
        const data = await fetchData();
        console.log('डेटा प्राप्त:', data);
    })();
</script>

पुराना तरीका: onload एट्रिब्यूट (कम अनुशंसित)

<body onload="initApp()">
    <script>
        async function initApp() {
            await testFunction();
        }
        
        function testFunction() {
            return new Promise(resolve => {
                setTimeout(() => {
                    console.log("Hi... एसिंक्रोनस पूरा हुआ");
                    resolve();
                }, 1000);
            });
        }
    </script>
</body>

एसिंक्रोनस फंक्शन कॉल करने के तरीके

बटन क्लिक पर एसिंक्रोनस कॉल

<button id="loadBtn">डेटा लोड करें</button>
<div id="result"></div>

<script>
    document.getElementById('loadBtn').addEventListener('click', async () => {
        const btn = document.getElementById('loadBtn');
        btn.disabled = true;
        btn.textContent = 'लोड हो रहा है...';
        
        try {
            const data = await fetchData();
            document.getElementById('result').textContent = JSON.stringify(data, null, 2);
        } catch (error) {
            console.error(error);
        } finally {
            btn.disabled = false;
            btn.textContent = 'डेटा लोड करें';
        }
    });
</script>

चलाने का तरीका

फ़ाइल को async-demo.html नाम से सेव करें और ब्राउज़र में खोलें।