JavaScript শিখতে আগ্রহী? আমার ইবুক পান jshandbook.com-এ
ভূমিকা
Axios হল একটি খুব জনপ্রিয় JavaScript লাইব্রেরি যা আপনি HTTP রিকোয়েস্ট করতে ব্যবহার করতে পারেন। এটি Browser এবং Node.js দুটি প্ল্যাটফর্মেই কাজ করে।
এটি সকল আধুনিক ব্রাউজার সাপোর্ট করে, IE8 এবং তার উপরের ভার্সন সহ।
এটি প্রমিস-ভিত্তিক, এবং এটি আমাদের async/await কোড লিখে XHR রিকোয়েস্ট খুব সহজে করতে দেয়।
নেটিভ 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 verbs-এর জন্য মেথড অফার করে, যা কম জনপ্রিয় হলেও ব্যবহার করা হয়:
axios.delete()axios.put()axios.patch()axios.options()
এছাড়া, এটি একটি মেথড অফার করে HTTP হেডার পাওয়ার জন্য, বডি ছাড়া।
GET রিকোয়েস্ট
Axios ব্যবহার করার একটি সুবিধাজনক উপায় হল আধুনিক (ES2017) async/await সিনট্যাক্স ব্যবহার করা।
এই Node.js উদাহরণটি Dog 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-এ
