Jassif Team Institution

Vue HTTP অনুরোধ

একটি HTTP অনুরোধ একটি ক্লায়েন্ট এবং একটি সার্ভারের মধ্যে যোগাযোগের একটি অংশ।

ক্লায়েন্ট সার্ভারে একটি HTTP অনুরোধ পাঠায়, যা অনুরোধটি পরিচালনা করে এবং একটি HTTP প্রতিক্রিয়া প্রদান করে।

HTTP - হাইপারটেক্সট ট্রান্সফার প্রোটোকল

HTTP মানে হাইপারটেক্সট ট্রান্সফার প্রোটোকল।

আমরা যখন ওয়েব ব্রাউজ করি তখন আমাদের ব্রাউজার সবসময় পটভূমিতে HTTP অনুরোধ করে। যখন আমরা একটি ওয়েব পৃষ্ঠা অ্যাক্সেস করি, তখন আমাদের ব্রাউজার (ক্লায়েন্ট) সার্ভারে অনেকগুলি HTTP অনুরোধ পাঠায়, HTTP প্রতিক্রিয়া হিসাবে সমস্ত সংশ্লিষ্ট ফাইল এবং ডেটা সহ আমাদের প্রয়োজনীয় পৃষ্ঠা পাঠায়।

সবচেয়ে সাধারণ HTTP অনুরোধPOST, GET, PUT, PATCH, এবংDELETEজাসিফ টিম-এ আমাদের HTTP অনুরোধ পদ্ধতি পৃষ্ঠায় বিভিন্ন ধরনের HTTP অনুরোধ সম্পর্কে আরও জানুন।

'আনয়ন' পদ্ধতি

Vue-তে সার্ভার থেকে ডেটা আনতে আপনি JavaScript fetch() পদ্ধতি ব্যবহার করতে পারেন।

এই টিউটোরিয়ালে আমরা fetch() পদ্ধতি ব্যবহার করার সময় HTTP অনুরোধ পদ্ধতি নির্দিষ্ট করব না, যার অর্থ ব্যাকগ্রাউন্ডে ব্যবহৃত ডিফল্ট অনুরোধ পদ্ধতি হল GET।

fetch() পদ্ধতিটি কোথা থেকে ডেটা পেতে হবে তা জানার জন্য একটি যুক্তি হিসাবে একটি URL ঠিকানা আশা করে।

এখানে একটি সাধারণ উদাহরণ যা একটি HTTP GET অনুরোধ পাঠাতে এবং HTTP রিটার্নে ডেটা পুনরুদ্ধার করতে fetch() পদ্ধতি ব্যবহার করে। এই ক্ষেত্রে অনুরোধ করা ডেটা হল স্থানীয় ফাইল file.txt-এর পাঠ্য:

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <p v-if="data">{{ data }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null,
    };
  },
  methods: {
    fetchData() {
      const response = fetch("file.txt");
      this.data = response;
    }
  }
};
</script>

উপরের উদাহরণে, আমরা শুধুমাত্র "[অবজেক্ট প্রতিশ্রুতি]" ফলাফল পাই, কিন্তু আমরা যা চাই তা নয়।

আমরা এই ফলাফলটি পেয়েছি কারণ fetch() একটি প্রতিশ্রুতি ভিত্তিক পদ্ধতি, যা একটি প্রতিশ্রুতি বস্তু প্রদান করে। সুতরাং fetch() পদ্ধতির প্রথম রিটার্নটি শুধুমাত্র একটি বস্তু যার মানে একটি HTTP অনুরোধ পাঠানো হয়েছে। এটি একটি "মুলতুবি" অবস্থা।

যখন fetch() পদ্ধতিটি আসলে আমাদের প্রয়োজনীয় ডেটা নিয়ে আসে, তখন প্রতিশ্রুতি পূরণ হয়।

অ্যাসিঙ্ক ব্যবহার করে এবং অপেক্ষা করুন

আমাদের প্রয়োজনীয় ডেটার সাথে প্রতিক্রিয়া আসার জন্য অপেক্ষা করতে, আমাদের fetch() পদ্ধতির আগে await অপারেটর ব্যবহার করতে হবে:

const response = await fetch("file.txt");

যখন একটি পদ্ধতির ভিতরে ওয়েট অপারেটর ব্যবহার করা হয়, তখন পদ্ধতিটি অবশ্যই অ্যাসিঙ্ক অপারেটরের সাথে ঘোষণা করতে হবে:

async fetchData() {
  const response = await fetch("file.txt");
  this.data = response;
}

অ্যাসিঙ্ক অপারেটর ব্রাউজারকে বলে যে পদ্ধতিটি অ্যাসিঙ্ক্রোনাস, যার অর্থ এটি কোনও কিছুর জন্য অপেক্ষা করছে এবং ব্রাউজারটি পদ্ধতিটি সম্পূর্ণ হওয়ার জন্য অপেক্ষা করার সময় অন্যান্য কাজগুলি চালিয়ে যেতে পারে।

এখন আমরা শুধুমাত্র একটি "প্রতিশ্রুতি" পাই এবং একটি "প্রতিশ্রুতি" পাই না, যার মানে আমরা file.txt ফাইলের মধ্যে প্রকৃত পাঠ্য পাওয়ার এক ধাপ কাছাকাছি:

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <p v-if="data">{{ data }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null,
    };
  },
  methods: {
    async fetchData() {
      const response = await fetch("file.txt");
      this.data = response;
    }
  }
};
</script>

file.txt , text() . text() , await .

অবশেষে ! এখন আমাদের fetch() পদ্ধতিতে file.txt ফাইলের ভিতরে টেক্সট পেতে হবে:

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <p v-if="data">{{ data }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null,
    };
  },
  methods: {
    async fetchData() {
      const response = await fetch("file.txt");
      this.data = await response.text();
    }
  }
};
</script>

একটি JSON ফাইল থেকে ডেটা প্রাপ্ত করা হচ্ছে

আগের উদাহরণে আমরা একটি .txt ফাইল থেকে টেক্সট পেয়েছি। কিন্তু ডাটা সংরক্ষণ করার অনেক উপায় আছে, এখন দেখা যাক কিভাবে আমরা একটি .json ফাইল থেকে তথ্য পেতে পারি।

JSON একটি সাধারণ ফাইল ফরম্যাট যা মানুষের পক্ষে পড়া সহজ কারণ ডেটা পাঠ্য হিসাবে সংরক্ষণ করা হয় এবং JSON ফর্ম্যাটটি প্রোগ্রামিং ভাষা দ্বারা ব্যাপকভাবে সমর্থিত, তাই আমরা উদাহরণ স্বরূপ, .json ফাইল থেকে কোন ডেটা বের করতে হবে তা নির্দিষ্ট করতে পারি।

একটি .json ফাইল থেকে ডেটা পড়ার জন্য, উপরের উদাহরণে আমাদের শুধুমাত্র পরিবর্তন করতে হবে .json ফাইলটি পেতে এবং প্রতিক্রিয়াতে text() পদ্ধতির পরিবর্তে json() পদ্ধতি ব্যবহার করতে হবে।

json() পদ্ধতি HTTP অনুরোধ থেকে প্রতিক্রিয়া পড়ে এবং একটি জাভাস্ক্রিপ্ট অবজেক্ট রিটার্ন করে।

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <pre v-if="data">{{ data }}</pre>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null,
    };
  },
  methods: {
    async fetchData() {
      const response = await fetch("bigLandMammals.json");
      this.data = await response.json();
    }
  }
};
</script>

যেহেতু json() পদ্ধতির ফলাফল একটি জাভাস্ক্রিপ্ট অবজেক্ট, তাই আমরা bigLandMammals.json ফাইল থেকে একটি এলোমেলো প্রাণী প্রদর্শন করতে উপরের উদাহরণটি পরিবর্তন করতে পারি:

<template>
  <p>Try clicking the button more than once to see new animals picked randomly.</p>
  <button @click="fetchData">Fetch Data</button>
  <div v-if="randomMammal">
    <h2>{{ randomMammal.name }}</h2>
    <p>Max weight: {{ randomMammal.maxWeight }} kg</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      randomMammal: null
    };
  },
  methods: {
    async fetchData() {
      const response = await fetch("bigLandMammals.json");
      const data = await response.json();
      const randIndex = Math.floor(Math.random()*data.results.length);
      this.randomMammal = data.results[randIndex];
    }
  }
};
</script>

একটি API থেকে ডেটা

API এর অর্থ হল অ্যাপ্লিকেশন প্রোগ্রামিং ইন্টারফেস। Jassif টিম এ API সম্পর্কে আরও জানুন।

অনেক আকর্ষণীয় বিনামূল্যের API আছে যেগুলো আমরা কানেক্ট করতে পারি এবং আবহাওয়ার ডেটা, স্টক মার্কেট ডেটা ইত্যাদি পেতে ব্যবহার করতে পারি।

একটি HTTP অনুরোধ সহ একটি API কল করার সময় আমরা যে প্রতিক্রিয়া পাই তাতে সব ধরণের ডেটা থাকতে পারে, তবে বেশিরভাগ ক্ষেত্রেই JSON ফর্ম্যাটে ডেটা থাকে।

<template>
  <h1>Example</h1>
  <p>Click the button to fetch data with an HTTP request.</p>
  <p>Each click generates an object with a random user from <a href="https://random-data-api.com/" target="_blank">https://random-data-api.com/</a>.</p>
  <p>The robot avatars are lovingly delivered by <a href="http://Robohash.org" target="_blank">RoboHash</a>.</p>
  <button @click="fetchData">Fetch data</button>
  <pre v-if="data">{{ data }}</pre>
</template>

<script>
  export default {
    data() {
      return {
        data: null,
      };
    },
    methods: {
      async fetchData() {      
        const response = await fetch("https://random-data-api.com/api/v2/users"); 
        this.data = await response.json();
      }   
    }
  };
</script>

Vue HTTP অনুরোধ টিউটোরিয়াল

Vue-তে HTTP অনুরোধ সম্পর্কে আপনার বোঝার পরীক্ষা করতে এই টিউটোরিয়ালটি সম্পূর্ণ করুন।

Vue-তে 'axios' লাইব্রেরি সহ HTTP অনুরোধ

'axios' জাভাস্ক্রিপ্ট লাইব্রেরি HTTP অনুরোধ করার অনুমতি দেয়।

আপনার নিজের মেশিনে উদাহরণটি তৈরি এবং চালানোর জন্য, আপনাকে প্রথমে আপনার প্রকল্প ফোল্ডারে টার্মিনাল ব্যবহার করে 'axios' লাইব্রেরি ইনস্টল করতে হবে:

npm install axios

কিভাবে একটি র্যান্ডম ব্যবহারকারী পেতে Vue তে 'axios' লাইব্রেরি ব্যবহার করবেন:

<template>
  <h1>Example</h1>
  <p>Click the button to fetch data with an HTTP request.</p>
  <button @click="fetchData">Fetch data</button>
  <div v-if="data" id="dataDiv">
    <img :src="data.data.avatar" alt="avatar">
    <pre>{{ data.data.first_name + " " + data.data.last_name }}</pre>
    <p>"{{ data.data.employment.title }}"</p>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    data() {
      return {
        data: null,
      };
    },
    methods: {
      async fetchData() {      
        this.data = await axios.get("https://random-data-api.com/api/v2/users");
      }
    }
  };
</script>

HTTP পদ্ধতির তুলনা