जावास्क्रिप्ट सीखने में रुचि है? मेरी ईबुक jshandbook.com पर प्राप्त करें
परिचय
Axios एक बहुत ही लोकप्रिय JavaScript लाइब्रेरी है जिसका उपयोग आप HTTP अनुरोध करने के लिए कर सकते हैं। यह ब्राउज़र और Node.js दोनों प्लेटफॉर्म पर काम करता है।
IE8 और उच्चतर सहित सभी आधुनिक ब्राउज़रों का समर्थन करता है।
यह वादा-आधारित है, और यह हमें एक्सएचआर अनुरोधों को बहुत आसानी से निष्पादित करने के लिए एसिंक/प्रतीक्षा कोड लिखने देता है।
देशी Fetch API की तुलना में Axios का उपयोग करने के कुछ लाभ हैं:
- पुराने ब्राउज़रों का समर्थन करता है (Fetch को पॉलीफ़िल की आवश्यकता होती है)
- अनुरोध को निरस्त करने का एक तरीका है
- प्रतिक्रिया टाइमआउट सेट करने का एक तरीका है
- अंतर्निहित सीएसआरएफ सुरक्षा है
- अपलोड प्रगति का समर्थन करता है
- स्वचालित JSON डेटा परिवर्तन करता है
- Node.js में काम करता है
इंस्टॉलेशन
npm का उपयोग करके Axios स्थापित किया जा सकता है:
npm install axiosया सूत:
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 में, आप $.get() . का प्रयोग करेंगे और $.post() $.ajax() . के बजाय )
Axios सभी HTTP क्रियाओं के लिए विधियाँ प्रदान करता है, जो कम लोकप्रिय हैं लेकिन फिर भी उपयोग की जाती हैं:
axios.delete()axios.put()axios.patch()axios.options()
यह एक अनुरोध के HTTP शीर्षलेख प्राप्त करने के लिए एक विधि भी प्रदान करता है, शरीर को छोड़ देता है।
अनुरोध प्राप्त करें
Axios का उपयोग करने का एक सुविधाजनक तरीका आधुनिक (ES2017) async/प्रतीक्षा सिंटैक्स का उपयोग करना है।
यह Node.js उदाहरण axios.get() का उपयोग करके कुत्तों की सभी नस्लों की सूची प्राप्त करने के लिए Dog API से पूछताछ करता है , और यह उन्हें गिनता है:
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/प्रतीक्षा का उपयोग नहीं करना चाहते हैं, तो आप प्रॉमिस सिंटैक्स का उपयोग कर सकते हैं:
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 अनुरोध करना GET अनुरोध करने जैसा है, लेकिन axios.get . के बजाय , आप axios.post . का उपयोग करते हैं :
axios.post('https://site.com/')POST पैरामीटर वाली एक वस्तु दूसरा तर्क है:
axios.post('https://site.com/', { foo: 'bar' })जावास्क्रिप्ट सीखने में रुचि है? मेरी ईबुक jshandbook.com पर प्राप्त करें