अध्याय 8: एपीआई कॉल्स (API Calls)

इस अध्याय में, हम रिएक्ट.js में एपीआई कॉल्स (API Calls) के महत्वपूर्ण पहलुओं का अन्वेषण करेंगे। एपीआई कॉल्स आपके एप्लिकेशन को बाहरी सेवाओं और सर्वर्स से डेटा लाने और भेजने की सुविधा प्रदान करते हैं। एपीआई कॉल्स का सही उपयोग आपके एप्लिकेशन को अधिक इंटरैक्टिव और डेटा-संचालित बनाता है। इस अध्याय में, हम एपीआई कॉल्स के विभिन्न तरीकों, उनके कार्यान्वयन, और उनसे संबंधित सर्वोत्तम प्रथाओं पर चर्चा करेंगे।

इस अध्याय में, आप निम्नलिखित विषयों को सीखेंगे:

• एपीआई कॉल्स का परिचय (Introduction to API Calls): एपीआई कॉल्स क्या हैं और क्यों महत्वपूर्ण हैं।
• फ़ेच API (Fetch API): ब्राउज़र में डेटा फेच करने के लिए आधुनिक तरीका।
• असिंक्रोनस और अवेट (Async/Await): असिंक्रोनस ऑपरेशन्स को नियंत्रित करने का सरल तरीका।
• एपीआई कॉल्स के लिए एक्सिओस (Axios): एपीआई कॉल्स करने के लिए लोकप्रिय लाइब्रेरी।
• एपीआई एरर हैंडलिंग (API Error Handling): एपीआई कॉल्स में एरर हैंडलिंग के सर्वोत्तम तरीके।
• रीडक्स के साथ एपीआई कॉल्स (API Calls with Redux): रीडक्स के साथ एपीआई कॉल्स को प्रबंधित करना।

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

एपीआई क्या है? (What is API?)

एपीआई (API – Application Programming Interface) एक ऐसा माध्यम है जो विभिन्न सॉफ्टवेयर अनुप्रयोगों को आपस में संवाद करने और डेटा का आदान-प्रदान करने की अनुमति देता है। एपीआई के माध्यम से, एक एप्लिकेशन दूसरे एप्लिकेशन की कार्यक्षमता का उपयोग कर सकता है, जिससे एप्लिकेशन को अधिक लचीला और शक्तिशाली बनाया जा सकता है। इस सेक्शन में, हम एपीआई की बुनियादी अवधारणाओं, इसके प्रकारों और इसके उपयोग के तरीकों पर चर्चा करेंगे।

एपीआई का परिचय (Introduction to API)

एपीआई एक इंटरफेस है जो विभिन्न सॉफ्टवेयर अनुप्रयोगों को एक-दूसरे के साथ संवाद करने और डेटा का आदान-प्रदान करने की अनुमति देता है। एपीआई का उपयोग सॉफ्टवेयर अनुप्रयोगों के बीच कार्यक्षमता और डेटा को साझा करने के लिए किया जाता है, जिससे विकास प्रक्रिया सरल और तेज हो जाती है।

एपीआई के प्रकार (Types of APIs)

1. वेब एपीआई (Web API):
   • वेब एपीआई HTTP प्रोटोकॉल का उपयोग करके वेब सर्वरों के साथ संवाद करने के लिए डिज़ाइन किए गए होते हैं।
   • ये एपीआई REST (Representational State Transfer) या SOAP (Simple Object Access Protocol) जैसे आर्किटेक्चर का पालन कर सकते हैं।
   • उदाहरण: JSONPlaceholder, OpenWeatherMap API, GitHub API
2. लाइब्रेरी एपीआई (Library API):
   • लाइब्रेरी एपीआई प्रोग्रामिंग लाइब्रेरी की कार्यक्षमता को एक्सपोज़ करते हैं, जिससे डेवलपर्स आसानी से इस कार्यक्षमता का उपयोग कर सकते हैं।
   • उदाहरण: jQuery, React, Lodash
3. ऑपरेटिंग सिस्टम एपीआई (Operating System API):
   • ये एपीआई ऑपरेटिंग सिस्टम की सेवाओं और संसाधनों तक पहुंचने की अनुमति देते हैं।
   • उदाहरण: Windows API, POSIX API
4. डाटाबेस एपीआई (Database API):
   • डाटाबेस एपीआई डेटाबेस के साथ इंटरफेस करते हैं और डेटा को क्वेरी, अपडेट और प्रबंधित करने की अनुमति देते हैं।
   • उदाहरण: SQL, MongoDB, Firebase

वेब एपीआई का उपयोग (Using Web API)

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

उदाहरण: फेच API (Fetch API):

import React, { useEffect, useState } from 'react';

function DataFetchingComponent() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <p>Loading...</p>;
  }

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export default DataFetchingComponent;

एपीआई के लाभ (Benefits of APIs)

1. प्रवर्धित कार्यक्षमता (Enhanced Functionality): एपीआई के माध्यम से, आप अपने एप्लिकेशन में बाहरी सेवाओं और लाइब्रेरी की कार्यक्षमता का उपयोग कर सकते हैं।
2. डेटा का आदान-प्रदान (Data Exchange): एपीआई विभिन्न एप्लिकेशनों के बीच डेटा का आदान-प्रदान करना सरल बनाते हैं।
3. स्केलेबिलिटी (Scalability): एपीआई आपके एप्लिकेशन को अधिक स्केलेबल बनाते हैं, क्योंकि वे बाहरी संसाधनों का उपयोग कर सकते हैं।
4. सरलता (Simplicity): एपीआई डेवलपर्स को जटिल कार्यों को सरल और त्वरित तरीके से निष्पादित करने की अनुमति देते हैं।

फ़ेच एपीआई (Fetch API)

फ़ेच एपीआई (Fetch API) एक आधुनिक वेब एपीआई है जो ब्राउज़र में असिंक्रोनस HTTP रिक्वेस्ट्स को बनाने और प्रबंधित करने की सुविधा प्रदान करता है। यह आपको नेटवर्क रिक्वेस्ट्स करने और प्रॉमिसेज़ (Promises) का उपयोग करके रिस्पॉन्स को हैंडल करने की अनुमति देता है। फ़ेच एपीआई, एक्सएमएलएचटीटीपीरिक्वेस्ट (XMLHttpRequest) का एक बेहतर और सरल विकल्प है। इस सेक्शन में, हम फ़ेच एपीआई की बुनियादी अवधारणाओं, इसके उपयोग के तरीकों, और इसके लाभों पर चर्चा करेंगे।

फ़ेच एपीआई का उपयोग (Using Fetch API)

फ़ेच एपीआई का उपयोग करके HTTP रिक्वेस्ट्स करना सरल और सीधा है। आप fetch फंक्शन का उपयोग करके GET, POST, PUT, DELETE आदि रिक्वेस्ट्स बना सकते हैं। यह फंक्शन एक प्रॉमिस रिटर्न करता है, जिसे आप then और catch के माध्यम से हैंडल कर सकते हैं।

GET रिक्वेस्ट का उदाहरण:

import React, { useEffect, useState } from 'react';

function DataFetchingComponent() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <p>Loading...</p>;
  }

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export default DataFetchingComponent;

POST रिक्वेस्ट का उदाहरण:

import React, { useState } from 'react';

function PostDataComponent() {
  const [name, setName] = useState('');
  const [message, setMessage] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();

    fetch('https://api.example.com/data', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ name })
    })
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    })
    .then(data => {
      setMessage('Data posted successfully!');
    })
    .catch(error => {
      console.error('Error posting data:', error);
      setMessage('Failed to post data');
    });
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <label>
          Name:
          <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
        </label>
        <button type="submit">Submit</button>
      </form>
      <p>{message}</p>
    </div>
  );
}

export default PostDataComponent;

असिंक्रोनस और अवेट (Async/Await)

फ़ेच एपीआई का उपयोग असिंक्रोनस/अवेट सिंटैक्स के साथ करना कोड को और भी साफ और पठनीय बनाता है। यह आपको प्रॉमिस चेनिंग की जटिलता से बचाता है।

Async/Await का उपयोग:

import React, { useEffect, useState } from 'react';

function DataFetchingComponent() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const data = await response.json();
        setData(data);
        setLoading(false);
      } catch (error) {
        console.error('Error fetching data:', error);
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) {
    return <p>Loading...</p>;
  }

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export default DataFetchingComponent;

फ़ेच एपीआई के लाभ (Benefits of Fetch API)

1. सरलता (Simplicity): फ़ेच एपीआई का उपयोग करना आसान और समझने में सरल है।
2. प्रॉमिस-बेस्ड (Promise-based): फ़ेच एपीआई प्रॉमिसेज़ का उपयोग करता है, जिससे असिंक्रोनस ऑपरेशन्स को प्रबंधित करना सरल हो जाता है।
3. ब्राउज़र सपोर्ट (Browser Support): फ़ेच एपीआई अधिकांश आधुनिक ब्राउज़रों में समर्थित है।
4. फ्लेक्सिबिलिटी (Flexibility): फ़ेच एपीआई GET, POST, PUT, DELETE जैसी विभिन्न प्रकार की HTTP रिक्वेस्ट्स को सपोर्ट करता है।

एक्सिओस का उपयोग (Using Axios)

एक्सिओस (Axios) एक लोकप्रिय HTTP क्लाइंट लाइब्रेरी है जो ब्राउज़र और Node.js में असिंक्रोनस HTTP रिक्वेस्ट्स को बनाने और प्रबंधित करने के लिए उपयोग की जाती है। एक्सिओस का उपयोग करके आप आसानी से GET, POST, PUT, DELETE जैसी विभिन्न प्रकार की HTTP रिक्वेस्ट्स कर सकते हैं। यह प्रॉमिस-बेस्ड है, जिससे असिंक्रोनस ऑपरेशन्स को प्रबंधित करना सरल हो जाता है। इस सेक्शन में, हम एक्सिओस की बुनियादी अवधारणाओं, इसके उपयोग के तरीकों, और इसके लाभों पर चर्चा करेंगे।

एक्सिओस का सेटअप (Setting Up Axios)

एक्सिओस का उपयोग करने के लिए, आपको पहले इसे अपने प्रोजेक्ट में इंस्टॉल करना होगा:

1. इंस्टॉल करना:

   npm install axios
   

    

2. इंपोर्ट करना:

   import axios from 'axios';
   

    

एक्सिओस का उपयोग (Using Axios)

एक्सिओस का उपयोग करके HTTP रिक्वेस्ट्स करना सरल है। आप axios फंक्शन का उपयोग करके GET, POST, PUT, DELETE आदि रिक्वेस्ट्स बना सकते हैं। यह फंक्शन एक प्रॉमिस रिटर्न करता है, जिसे आप then और catch के माध्यम से हैंडल कर सकते हैं।

GET रिक्वेस्ट का उदाहरण:

import React, { useEffect, useState } from 'react';
import axios from 'axios';

function DataFetchingComponent() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    axios.get('https://api.example.com/data')
      .then(response => {
        setData(response.data);
        setLoading(false);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <p>Loading...</p>;
  }

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export default DataFetchingComponent;

POST रिक्वेस्ट का उदाहरण:

import React, { useState } from 'react';
import axios from 'axios';

function PostDataComponent() {
  const [name, setName] = useState('');
  const [message, setMessage] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();

    axios.post('https://api.example.com/data', { name })
      .then(response => {
        setMessage('Data posted successfully!');
      })
      .catch(error => {
        console.error('Error posting data:', error);
        setMessage('Failed to post data');
      });
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <label>
          Name:
          <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
        </label>
        <button type="submit">Submit</button>
      </form>
      <p>{message}</p>
    </div>
  );
}

export default PostDataComponent;

असिंक्रोनस और अवेट (Async/Await)

एक्सिओस का उपयोग असिंक्रोनस/अवेट सिंटैक्स के साथ करना कोड को और भी साफ और पठनीय बनाता है। यह आपको प्रॉमिस चेनिंग की जटिलता से बचाता है।

Async/Await का उपयोग:

import React, { useEffect, useState } from 'react';
import axios from 'axios';

function DataFetchingComponent() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://api.example.com/data');
        setData(response.data);
        setLoading(false);
      } catch (error) {
        console.error('Error fetching data:', error);
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) {
    return <p>Loading...</p>;
  }

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export default DataFetchingComponent;

एक्सिओस के लाभ (Benefits of Axios)

1. सरलता (Simplicity): एक्सिओस का उपयोग करना आसान और समझने में सरल है।
2. प्रॉमिस-बेस्ड (Promise-based): एक्सिओस प्रॉमिसेज़ का उपयोग करता है, जिससे असिंक्रोनस ऑपरेशन्स को प्रबंधित करना सरल हो जाता है।
3. क्लाइंट और सर्वर दोनों पर उपयोग (Client and Server Usage): एक्सिओस को ब्राउज़र और Node.js दोनों में उपयोग किया जा सकता है।
4. इंटरसेप्टर्स (Interceptors): एक्सिओस इंटरसेप्टर्स का समर्थन करता है, जो आपको रिक्वेस्ट और रिस्पॉन्स को प्रोसेस करने से पहले मॉडिफाई करने की अनुमति देते हैं।
5. स्वचालित JSON डेटा ट्रांसफॉर्मेशन (Automatic JSON Data Transformation): एक्सिओस JSON डेटा को स्वचालित रूप से ट्रांसफॉर्म करता है, जिससे डेटा को प्रोसेस करना आसान हो जाता है।

एपीआई डेटा का प्रदर्शन (Displaying API Data)

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

चरण 1: एपीआई कॉल करना (Making an API Call)

पहला कदम एपीआई कॉल करना है। हम एक्सिओस (Axios) का उपयोग करेंगे, लेकिन आप फेच एपीआई (Fetch API) का उपयोग भी कर सकते हैं। इस उदाहरण में, हम एक्सिओस का उपयोग करेंगे।

1. एक्सिओस को इंस्टॉल और इंपोर्ट करना:

   npm install axios
   import axios from 'axios';
   

    

2. एपीआई कॉल करना और डेटा फेच करना:

   import React, { useEffect, useState } from 'react';
   import axios from 'axios';
   
   function DataFetchingComponent() {
     const [data, setData] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
   
     useEffect(() => {
       axios.get('https://api.example.com/data')
         .then(response => {
           setData(response.data);
           setLoading(false);
         })
         .catch(error => {
           console.error('Error fetching data:', error);
           setError(error);
           setLoading(false);
         });
     }, []);
   
     if (loading) {
       return <p>Loading...</p>;
     }
   
     if (error) {
       return <p>Error fetching data: {error.message}</p>;
     }
   
     return (
       <ul>
         {data.map(item => (
           <li key={item.id}>{item.name}</li>
         ))}
       </ul>
     );
   }
   
   export default DataFetchingComponent;
   

    

चरण 2: डेटा को स्टेट में संग्रहित करना (Storing Data in State)

हमने useState हुक का उपयोग करके डेटा, लोडिंग स्टेट, और एरर स्टेट को संग्रहित किया है। एपीआई कॉल सफल होने पर डेटा को setData के माध्यम से अपडेट किया जाता है। यदि कोई एरर होती है, तो setError का उपयोग करके एरर स्टेट को अपडेट किया जाता है।

चरण 3: यूजर इंटरफेस में डेटा का प्रदर्शन (Displaying Data in User Interface)

डेटा को सफलतापूर्वक फेच और स्टोर करने के बाद, हम उसे यूजर इंटरफेस में प्रदर्शित कर सकते हैं। यहाँ, हमने map फंक्शन का उपयोग करके डेटा को <ul> और <li> टैग्स के अंदर प्रदर्शित किया है।

पूर्ण उदाहरण:

import React, { useEffect, useState } from 'react';
import axios from 'axios';

function DataFetchingComponent() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios.get('https://api.example.com/data')
      .then(response => {
        setData(response.data);
        setLoading(false);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
        setError(error);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error fetching data: {error.message}</p>;
  }

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export default DataFetchingComponent;

एरर हैंडलिंग (Error Handling)

हमने एरर हैंडलिंग को भी शामिल किया है। यदि एपीआई कॉल के दौरान कोई एरर होती है, तो हम एरर मैसेज को यूजर इंटरफेस में प्रदर्शित करते हैं। यह उपयोगकर्ताओं को सूचित करने का एक अच्छा तरीका है कि कुछ गलत हुआ है।

लोडिंग स्टेट (Loading State)

लोडिंग स्टेट उपयोगकर्ताओं को सूचित करता है कि डेटा फेच किया जा रहा है। जब तक डेटा लोड हो रहा है, हम “Loading…” मैसेज प्रदर्शित करते हैं। डेटा लोड हो जाने पर यह मैसेज हटा दिया जाता है।