सिंपल API कॉल का परिचय

एपीआई क्या है?

• एपीआई का उपयोग डेटा को सर्वर से एप्लीकेशन में लाने के लिए किया जाता है।
• जावास्क्रिप्ट और अन्य फ्रेमवर्क डायरेक्टली डेटाबेस से कनेक्ट नहीं हो सकते।
• API सर्वर साइड स्क्रिप्टिंग भाषा (Python, Java, Node.js, PHP) से बनाई जाती हैं।

एपीआई के प्रकार

• GET: डेटा को प्राप्त करने के लिए
• POST: नया डेटा जोड़ने के लिए
• PUT/PATCH: डेटा को अपडेट करने के लिए
• DELETE: डेटा को हटाने के लिए
• अन्य महत्वपूर्ण प्रोटोकॉल: HTTP, REST API

API कॉल कैसे करें?

1. Function बनाना: एक Function जैसे getData बनाना जो API कॉल करेगा।
2. useEffect Hook का उपयोग: API कॉल को पेज के लोड होने पर प्रभावी करने के लिए।
3. डेटा प्राप्त करना: fetch का उपयोग करके API से डेटा प्राप्त करना।
4. डेटा को JSON में बदलना: प्राप्त डेटा को JSON में बदलना।
5. State में डेटा स्टोर करना: प्राप्त डेटा को state में स्टोर करना।
6. डेटा डिस्प्ले करना: डेटा को UI पर प्रदर्शित करना।

Step-by-Step Implementation

1. URL और Fetch Setup: API का URL कॉपी करना और fetch मेथड से कॉल करना।
2. Fetching Data: await fetch का उपयोग कर डेटा प्राप्त करना और उसे JSON में बदलना।
3. State Management: useState का उपयोग करके डेटा स्टोर करना।
4. Data Rendering: प्राप्त डेटा को UI में दिखाना।

UseEffect Hook Example

• API कॉल को useEffect के अंदर कॉल करना ताकि पेज लोड होते ही डेटा लोड हो जाए।
• Conditional Rendering का उपयोग कर डेटा लोड होने के बाद उसे प्रदर्शित करना।

Practical Example

1. Function Creation: getData नामक फंक्शन बनाना।
2. Fetching and Storing Data: const result = await fetch(url) और const data = await result.json() का उपयोग करना।
3. Rendering Data: प्राप्त डेटा को UI में data.id, data.title, data.body से निकाल कर प्रदर्शित करना।

महत्वपूर्ण बिंदु

• API कॉल अप्लीकेशन को नियमित इन्टरैक्शन से बचाने में मदद करता है।
• प्राप्त डेटा को स्टेट और UI में सही तरीके से मैनेज करना आवश्यक है।
• भविष्य के प्रोजेक्ट्स में API कॉल करने का कौशल आवश्यक है।