React Native Academy · पाठ

Axios से POST, PUT और DELETE

Axios POST और PUT का उपयोग करके API को डेटा भेजें, स्थानीय स्थिति अपडेट करने के लिए उत्तर सँभालें और ऐसी delete कार्रवाई लागू करें जो सर्वर तथा सूची दोनों से item हटाए।

पाठ 4, कुल 4 में से13 चरण

Axios से POST, PUT और DELETE, CoddyKit पर React Native Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह React Native Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Native Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

Axios के साथ CRUD Operations

Data प्राप्त करने के अलावा, अधिकांश apps को server पर resources create, update और delete करने की आवश्यकता होती है। Axios में axios.post, axios.put, axios.patch और axios.delete methods हैं, जो सीधे HTTP verbs से मेल खाती हैं। हर method एक ऐसे Promise को लौटाती है जो server के response में resolve होता है।

POST: नया Resource बनाना

axios.post(url, data) नया resource बनाने के लिए request body को JSON के रूप में भेजता है। दूसरा argument request body object होता है — Axios इसे अपने-आप JSON में serialize करता है और Content-Type: application/json header सेट करता है। Server आम तौर पर बनाए गए resource को उसके assigned ID सहित लौटाता है।

const createPost = async (title, body) => {
  const response = await axios.post(
    'https://jsonplaceholder.typicode.com/posts',
    { title, body, userId: 1 }
  );
  console.log('Created:', response.data);
  // { id: 101, title: '...', body: '...', userId: 1 }
  return response.data;
};

POST के बाद State में नया Item जोड़ना

सफल POST के बाद, पूरे data को दोबारा प्राप्त किए बिना creation दिखाने के लिए लौटाए गए item को अपने local state array में जोड़ें। नए item को मौजूदा array के साथ सुरक्षित रूप से merge करने के लिए setState के functional रूप का उपयोग करें। Server द्वारा दिया गया ID बाद के renders में unique key के रूप में उपयोग होता है।

const handleCreate = async (formData) => {
  try {
    const response = await axios.post('/posts', formData);
    const newPost = response.data;
    setPosts((prev) => [newPost, ...prev]);
  } catch (err) {
    setError('Failed to create post');
  }
};

PUT: पूरे Resource को बदलना

axios.put(url, data) दिए गए data से पूरे resource को बदल देता है। Resource का ID URL में शामिल करें और body में सभी fields भेजें। PUT idempotent है — समान data के साथ इसे कई बार call करने पर समान परिणाम मिलता है। PUT का उपयोग तब करें जब आप केवल कुछ fields अपडेट करने के बजाय पूरा resource बदल रहे हों।

const updatePost = async (postId, updatedData) => {
  const response = await axios.put(
    '/posts/' + postId,
    updatedData
  );
  return response.data;
};

PATCH: आंशिक Update

axios.patch(url, data) पूरे resource के बजाय केवल बदली हुई fields भेजता है। किसी एक field (जैसे user का avatar या post का title) को update करते समय यह PUT से अधिक efficient होता है। कई REST APIs PUT और PATCH दोनों का समर्थन करती हैं — कौन-सा अपेक्षित है, यह जानने के लिए API documentation देखें।

// Only update the title, leave other fields untouched
const patchPostTitle = async (postId, newTitle) => {
  const response = await axios.patch(
    '/posts/' + postId,
    { title: newTitle }
  );
  return response.data;
};

PUT/PATCH के बाद State अपडेट करना

सफल update के बाद state array में पुराने item को server से लौटे हुए version से बदलें। State पर iterate करने और matching item को बदलने के लिए Array.map का उपयोग करें। इससे पूरे data को दोबारा प्राप्त किए बिना local state server के साथ synchronized रहती है।

const handleUpdate = async (postId, updatedData) => {
  try {
    const response = await axios.put('/posts/' + postId, updatedData);
    const updatedPost = response.data;
    setPosts((prev) =>
      prev.map((p) => (p.id === postId ? updatedPost : p))
    );
  } catch (err) {
    setError('Failed to update post');
  }
};

DELETE: Resource हटाना

axios.delete(url) दिए गए URL पर मौजूद resource को हटा देता है। अधिकांश APIs सफल deletion पर 200 या 204 (No Content) response लौटाती हैं। POST और PUT के विपरीत, DELETE request body नहीं भेजता। axios.delete का तीसरा argument auth headers जैसे config options पास कर सकता है।

const deletePost = async (postId) => {
  await axios.delete('/posts/' + postId);
  console.log('Post deleted');
};

DELETE के बाद State से Item हटाना

सफल DELETE के बाद, Array.filter की मदद से स्थानीय state array से उस item को हटा दें। पूरी सूची को फिर से प्राप्त करने के लिए दोबारा अनुरोध किए बिना UI तुरंत अपडेट हो जाता है। यदि DELETE विफल होता है, तो error पकड़ लिया जाता है और item state में बना रहता है—साथ ही उपयोगकर्ता को error message दिखाया जाता है।

const handleDelete = async (postId) => {
  try {
    await axios.delete('/posts/' + postId);
    setPosts((prev) => prev.filter((p) => p.id !== postId));
  } catch (err) {
    setError('Failed to delete post');
  }
};

आशावादी अपडेट

आशावादी अपडेट UI को तुरंत दिखाने के लिए स्थानीय state को server की पुष्टि से पहले ही अपडेट कर देते हैं। यदि अनुरोध विफल होता है, तो मूल state बहाल कर दी जाती है और error दिखाया जाता है। इस तरीके का उपयोग Twtter के like button और Gmail के delete में किया जाता है—धीमे connection पर भी कार्रवाई तुरंत होती हुई महसूस होती है।

const handleDelete = async (postId) => {
  const originalPosts = posts;
  // Update immediately
  setPosts((prev) => prev.filter((p) => p.id !== postId));
  try {
    await axios.delete('/posts/' + postId);
  } catch (err) {
    // Revert on failure
    setPosts(originalPosts);
    setError('Delete failed. Please try again.');
  }
};

FormData के साथ फ़ाइलें अपलोड करना

POST के माध्यम से image या file अपलोड करने के लिए, एक FormData object बनाएं, React Native URI format का उपयोग करके file को append करें और उसे axios.post में पास करें। Content-Type header को multipart/form-data पर सेट करें, ताकि server उसे JSON के बजाय file upload के रूप में सही ढंग से parse कर सके।

const uploadAvatar = async (imageUri) => {
  const formData = new FormData();
  formData.append('avatar', {
    uri: imageUri,
    name: 'avatar.jpg',
    type: 'image/jpeg',
  });

  const response = await axios.post('/user/avatar', formData, {
    headers: { 'Content-Type': 'multipart/form-data' },
  });
  return response.data.avatarUrl;
};

Mutations को क्रम से चलाना: Create के बाद Navigate करना

सफल POST या PUT के बाद, आप अक्सर उपयोगकर्ता को अभी बनाए गए resource की detail screen पर ले जाना चाहेंगे। अपने try/catch के success path में state update के बाद navigation call को क्रम से चलाएं। navigation params के रूप में नए resource का ID या पूरा object पास करें।

const handleCreatePost = async (formData) => {
  try {
    const response = await axios.post('/posts', formData);
    const newPost = response.data;
    setPosts((prev) => [newPost, ...prev]);
    navigation.navigate('PostDetail', { postId: newPost.id });
  } catch (err) {
    setError('Failed to create post');
  }
};

त्वरित जाँच

इस lesson में Axios के साथ POST, PUT और DELETE requests की अपनी समझ जाँचें।

इंटरैक्टिव पाठ में इसका उत्तर दें

Lesson का पुनरावलोकन

इस lesson में आपने सीखा: axios.post resource बनाने के लिए JSON body भेजता है और server से बनाया गया item लौटाता है, axios.put/patch किसी resource को पूरी तरह या आंशिक रूप से बदलता है—सफलता के बाद Array.map से state अपडेट करें, और axios.delete किसी resource को हटाता है—Array.filter से state अपडेट करें और तेज़ UX के लिए आशावादी अपडेट का उपयोग करें। आगे हम जटिल application state को manage करने के लिए Redux Toolkit का अध्ययन करेंगे।

शुरुआत निःशुल्क

एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 30
पाठ: 120

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Axios से POST, PUT और DELETE” पाठ निःशुल्क है?

हाँ — React Native Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “Axios से POST, PUT और DELETE” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। React Native Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Axios से POST, PUT और DELETE” में मैं क्या सीखूँगा?

Axios POST और PUT का उपयोग करके API को डेटा भेजें, स्थानीय स्थिति अपडेट करने के लिए उत्तर सँभालें और ऐसी delete कार्रवाई लागू करें जो सर्वर तथा सूची दोनों से item हटाए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ React Native Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या React Native Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर React Native Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“Axios से POST, PUT और DELETE” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस React Native Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर React Native Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← React Native Academy पर वापस जाएँ