কম্পিউটার

Axios ব্যবহার করে জাভাস্ক্রিপ্টে সহজ HTTP অনুরোধ

জাভাস্ক্রিপ্ট শিখতে আগ্রহী? jshandbook.com
এ আমার ইবুক পান

পরিচয়

Axios একটি খুব জনপ্রিয় জাভাস্ক্রিপ্ট লাইব্রেরি যা আপনি HTTP অনুরোধগুলি সম্পাদন করতে ব্যবহার করতে পারেন। এটি ব্রাউজার এবং Node.js উভয় প্ল্যাটফর্মেই কাজ করে।

IE8 এবং উচ্চতর সহ সমস্ত আধুনিক ব্রাউজার সমর্থন করে৷

এটি প্রতিশ্রুতি-ভিত্তিক, এবং এটি আমাদের খুব সহজে XHR অনুরোধগুলি সম্পাদন করতে অ্যাসিঙ্ক/ওয়েট কোড লিখতে দেয়৷

Axios ব্যবহার করার ফলে নেটিভ ফেচ API:

থেকে বেশ কিছু সুবিধা রয়েছে
  • পুরানো ব্রাউজার সমর্থন করে (আনয়ন একটি পলিফিল প্রয়োজন)
  • একটি অনুরোধ বাতিল করার একটি উপায় আছে
  • একটি প্রতিক্রিয়া সময়সীমা সেট করার একটি উপায় আছে
  • বিল্ট-ইন CSRF সুরক্ষা আছে
  • আপলোড অগ্রগতি সমর্থন করে
  • স্বয়ংক্রিয় 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/await syntax ব্যবহার করা।

এই 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/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 অনুরোধ সম্পাদন করা ঠিক একটি GET অনুরোধ করার মতো, কিন্তু axios.get এর পরিবর্তে , আপনি axios.post ব্যবহার করেন :

axios.post('https://site.com/')

POST প্যারামিটার ধারণকারী একটি বস্তু হল দ্বিতীয় যুক্তি:

axios.post('https://site.com/', { foo: 'bar' })
জাভাস্ক্রিপ্ট শিখতে আগ্রহী? jshandbook.com
এ আমার ইবুক পান
  1. জাভাস্ক্রিপ্ট ব্যবহার করে একটি মূল উপাদান অ্যাক্সেস করা

  2. জাভাস্ক্রিপ্ট আমদানিতে '{ }' ব্যবহার করছেন?

  3. জাভাস্ক্রিপ্ট অবজেক্টের অ্যারের অ্যারের পদ্ধতি ব্যবহার করছেন?

  4. জাভাস্ক্রিপ্টে গোপনীয়তা অর্জনের জন্য ক্লোজার ব্যবহার করা