एपीआई कॉल आधुनिक वेब विकास का एक महत्वपूर्ण हिस्सा हैं। जावास्क्रिप्ट इस कार्य को पूरा करने के लिए कई तरीके प्रदान करता है, प्रत्येक के अपने फायदे और नुकसान हैं। यह आलेख आपको जावास्क्रिप्ट में एपीआई कॉल करने के चार मुख्य तरीकों से परिचित कराएगा जिनका उपयोग आप अपनी परियोजनाओं में कर सकते हैं।

XMLHttpRequest (XHR)

XMLHttpRequest (XHR) एपीआई को कॉल करने का एक पारंपरिक तरीका है, जो सभी ब्राउज़र संस्करणों में समर्थित है। यह विधि विश्वसनीय और व्यापक रूप से उपयोग की जाने वाली है, हालांकि इसके सिंटैक्स को पढ़ना और बनाए रखना कभी-कभी कठिन हो सकता है।

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            console.log(JSON.parse(xhr.responseText)); // Parse and log the response data
        } else {
            console.error('Error:', xhr.statusText); // Log any errors
        }
    }
};
xhr.send();

एपीआई लायें

फ़ेच एपीआई वादों के आधार पर एपीआई कॉल करने का एक अधिक आधुनिक और सरल तरीका है। यह एसिंक्रोनस ऑपरेशंस का समर्थन करता है और एसिंक और वेट का उपयोग करके विस्तार करना आसान है।

fetch("https://api.example.com/data")
    .then(response => response.json())
    .then(data => console.log(data)) // Log the response data
    .catch(error => console.error('Error:', error)); // Log any errors

async और प्रतीक्षा का उपयोग करना।

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

एक्सियोस

Axios HTTP अनुरोधों के लिए एक लोकप्रिय लाइब्रेरी है जो एपीआई कॉल करने के लिए एक सरल और सुसंगत इंटरफ़ेस प्रदान करती है। इसे पहले एनपीएम या यार्न का उपयोग करके स्थापित करने की आवश्यकता है।
एनपीएम इंस्टाल एक्सियोस
या
यार्न एक्सियो जोड़ें

फिर आप एपीआई कॉल करने के लिए एक्सियोस का उपयोग कर सकते हैं:

const axios = require('axios');

axios.get("https://api.example.com/data")
    .then(response => {
        console.log(response.data); // Log the response data
    })
    .catch(error => {
        console.error('Error:', error); // Log any errors
    });

async और प्रतीक्षा का उपयोग करना:

async function fetchData() {
    try {
        const response = await axios.get("https://api.example.com/data");
        console.log(response.data); // Log the response data
    } catch (error) {
        console.error('Error:', error); // Log any errors
    }
}
fetchData();

jQuery AJAX

jQuery AJAX jQuery लाइब्रेरी का उपयोग करके एपीआई कॉल करने की एक विधि है। हालाँकि आज jQuery का उपयोग कम होता है, फिर भी यह पुराने प्रोजेक्ट्स में दिखाई देता है।

स्रोत फोटो:
राकोजी, ग्रेग। वेबसाइट डिज़ाइन पुस्तकें. ऑनलाइन। इन: अनप्लैश. 2016. यहां उपलब्ध: https://unsplash.com/photos/html-css-book-vw3Ahg4x1tY। [सीआईटी. 2024-07-16]।