JavaScript सीखने में रुचि है? मेरी ईबुक jshandbook.com पर प्राप्त करें
परिचय
Axios एक बहुत लोकप्रिय JavaScript लाइब्रेरी है जिसका उपयोग आप HTTP अनुरोध करने के लिए कर सकते हैं। यह ब्राउज़र और Node.js दोनों प्लेटफॉर्म पर काम करता है।
यह IE8 और उच्च सहित सभी आधुनिक ब्राउज़रों का समर्थन करता है।
यह प्रॉमिस-आधारित है, और यह हमें XHR अनुरोधों को बहुत आसानी से करने के लिए async/await कोड लिखने देता है।
नेटिव Fetch API पर Axios का उपयोग करने के कई फायदे हैं:
- पुराने ब्राउज़रों का समर्थन करता है (Fetch को पॉलीफिल की आवश्यकता होती है)
- एक अनुरोध को रद्द करने का एक तरीका है
- एक प्रतिक्रिया टाइमआउट सेट करने का एक तरीका है
- अंतर्निहित CSRF सुरक्षा है
- अपलोड प्रगति का समर्थन करता है
- स्वचालित JSON डेटा परिवर्तन करता है
- Node.js में काम करता है
इंस्टॉलेशन
Axios को npm का उपयोग करके इंस्टॉल किया जा सकता है:
npm install axiosया yarn:
yarn add axiosया बस इसे unpkg.com का उपयोग करके अपने पेज में शामिल करें:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>Axios API
आप axios ऑब्जेक्ट से एक HTTP अनुरोध शुरू कर सकते हैं:
axios({ url: 'https://dog.ceo/api/breeds/list/all', method: 'get', data: { foo: 'bar' }})लेकिन सुविधा के लिए, आप आमतौर पर उपयोग करेंगे
axios.get()axios.post()
(jQuery की तरह, आप $.ajax() के बजाय $.get() और $.post() का उपयोग करेंगे)
Axios कम लोकप्रिय लेकिन फिर भी उपयोग किए जाने वाले सभी HTTP क्रियाओं के लिए विधियाँ प्रदान करता है:
axios.delete()axios.put()axios.patch()axios.options()
यह एक अनुरोध के HTTP हेडर्स प्राप्त करने के लिए एक विधि भी प्रदान करता है, बॉडी को छोड़कर।
GET अनुरोध
Axios का उपयोग करने का एक सुविधाजनक तरीका आधुनिक (ES2017) async/await सिंटैक्स का उपयोग करना है।
यह Node.js उदाहरण डॉग API को क्वेरी करता है ताकि सभी डॉग नस्लों की सूची प्राप्त की जा सके, axios.get() का उपयोग करके, और उनकी गणना करता है:
const axios = require('axios')const getBreeds = async () => { try { return await axios.get('https://dog.ceo/api/breeds/list/all') } catch (error) { console.error(error) }}const countBreeds = async () => { const breeds = await getBreeds() if (breeds.data.message) { console.log(`Got ${Object.entries(breeds.data.message).length} breeds`) }}countBreeds()यदि आप async/await का उपयोग नहीं करना चाहते हैं, तो आप प्रॉमिस सिंटैक्स का उपयोग कर सकते हैं:
const axios = require('axios')const getBreeds = () => { try { return axios.get('https://dog.ceo/api/breeds/list/all') } catch (error) { console.error(error) }}const countBreeds = async () => { const breeds = getBreeds() .then(response => { if (response.data.message) { console.log( `Got ${Object.entries(response.data.message).length} breeds` ) } }) .catch(error => { console.log(error) })}countBreeds()GET अनुरोधों में पैरामीटर्स जोड़ें
एक GET प्रतिक्रिया में URL में पैरामीटर्स हो सकते हैं, जैसे: https://site.com/?foo=bar।
Axios के साथ आप इसे केवल उस URL का उपयोग करके कर सकते हैं:
axios.get('https://site.com/?foo=bar')या आप विकल्पों में एक params प्रॉपर्टी का उपयोग कर सकते हैं:
axios.get('https://site.com/', { params: { foo: 'bar' }})POST अनुरोध
POST अनुरोध करना GET अनुरोध करने जैसा ही है, लेकिन axios.get के बजाय, आप axios.post का उपयोग करते हैं:
axios.post('https://site.com/')POST पैरामीटर्स वाला एक ऑब्जेक्ट दूसरा तर्क है:
axios.post('https://site.com/', { foo: 'bar' })JavaScript सीखने में रुचि है? मेरी ईबुक jshandbook.com पर प्राप्त करें
