Vue HTTP so‘rov
HTTP so‘rovi mijoz va server o‘rtasidagi aloqaning bir qismidir.
Mijoz serverga HTTP so‘rovini yuboradi, u so‘rovni bajaradi va HTTP javobini qaytaradi.
HTTP
HTTP Hyper Text Transfer Protocol degan ma’noni anglatadi.
Bizning brauzerimiz Internetni ko‘rib chiqayotganimizda har doim fonda HTTP so‘rovlarini amalga oshiradi. Internet sahifasiga kirganimizda, brauzerimiz (mijoz) server bizga kerakli sahifani HTTP javoblari sifatida barcha tegishli fayllar va ma’lumotlar bilan yuborishi uchun bir nechta HTTP so‘rovlarini yuboradi.
HTTP so‘rovlarining eng keng tarqalgan turlari POST, GET, PUT, PATCH va DELETE. HTTP so‘rovlarining turli turlari haqida bizning HTTP so‘rov metodlari sahifamizda ko‘proq bilib oling.
HTTP nima haqida bizning HTTP nima sahifamizda ko‘proq bilib oling.
"Olib olish" usuli
Vue serveridan ma’lumotlarni olish uchun JavaScript fetch() usulidan foydalanishimiz mumkin.
Ushbu qo‘llanmada fetch() usulidan foydalanganda biz HTTP so‘rov usulini belgilamaymiz va bu GET so‘rovining standart usuli fonda ishlatiladigan narsa ekanligini anglatadi.
fetch() usuli URL manzilini argument sifatida kutadi, shunda u ma’lumotlarni qayerdan olishni biladi.
Bu yerda HTTP GET so‘rovini yuborish va HTTP javobi sifatida ma’lumotlarni olish uchun fetch() usulidan foydalanadigan oddiy misol. Bu holda so‘ralgan ma’lumotlar fayl.txt mahalliy faylidagi matndir:
Misol
App.vue:
<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>
Yuqoridagi misolda biz natijada faqat "[object Promise]" ni olamiz, lekin bu biz xohlagan narsa emas.
Biz bu natijani olamiz, chunki fetch() Promise qilingan obyektni qaytaradigan Promise qilingan usuldir. Fetch() usulining birinchi qaytarilishi shunchaki obyekt bo‘lib, HTTP so‘rovi yuborilganligini bildiradi. Bu "kutilayotgan" holat.
Fetch() usuli biz xohlagan ma’lumotni olganida, Promise bajariladi.
Javobning bajarilishini kutish uchun biz kerakli ma’lumotlar bilan fetch() usuli oldida await operatoridan foydalanishimiz kerak:
const response = await fetch("file.txt");
Usul ichida kutish operatori ishlatilsa, metod async operatori bilan e’lon qilinishi kerak:
async fetchData() {
const response = await fetch("file.txt");
this.data = response;
}
Async operatori brauzerga usulning asinxron ekanligini aytadi, ya’ni u biror narsani kutadi va brauzer metod tugashini kutayotganda boshqa vazifalarni bajarishda davom etishi mumkin.
Endi biz oladigan narsa "Javob" bo‘lib, endi shunchaki "Promise" emas, ya’ni biz file.txt faylidagi haqiqiy matnni olishga bir qadam yaqinroqmiz:
Misol
App.vue:
<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 faylidagi matnni olish uchun javobda text() usulidan foydalanishimiz kerak. text() usuli Promise-ga asoslangan metod bo‘lgani uchun biz uning oldida await operatoridan foydalanishimiz kerak.
Nihoyat! Fetch() usuli bilan file.txt fayli ichidan matnni olish uchun bizda nima kerak bo‘lsa, hozir:
Misol
App.vue:
<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 faylidan ma’lumotlarni olish
Oldingi misolda biz .txt faylidan matn oldik. Ammo ma’lumotlarni saqlashning ko‘plab metodlari mavjud va endi biz .json faylidan ma’lumotni qanday olishimiz mumkinligini ko‘rib chiqamiz.
JSON keng tarqalgan fayl formati bo‘lib, u bilan ishlash oson, chunki ma’lumotlar matn sifatida saqlanadi, shuning uchun uni odamlar uchun o‘qish oson va JSON formati dasturlash tillari tomonidan ham keng qo‘llab-quvvatlanadi, shuning uchun biz, masalan, .json faylidan qanday ma’lumotlarni ajratib olishni belgilashimiz mumkin.
.json faylidan ma’lumotlarni o‘qish uchun yuqoridagi misolga qilishimiz kerak bo‘lgan yagona o‘zgarish bu .json faylini olish va javobda text() usuli o‘rniga json() usulidan foydalanish.
json() usuli HTTP so‘rovidan javobni o‘qiydi va JavaScript obyektini qaytaradi.
Biz bu yerda JSON formatlangan matnni ko‘rsatish uchun <pre> tegidan foydalanamiz, chunki u o‘qishni osonlashtirishi uchun bo‘shliqlar va qator uzilishlarini saqlaydi.
Misol
App.vue:
<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() usulining natijasi JavaScript obyekti bo‘lgani uchun biz yuqoridagi misolni bigLandMammals.json faylidagi tasodifiy hayvonni ko‘rsatish uchun o‘zgartirishimiz mumkin:
Misol
App.vue:
<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 ma’lumotlari
API "Application Programming Interface" degan ma’noni anglatadi. API haqida ko‘proq ma’lumotga ega bo‘lishingiz mumkin.
Ob-havo ma’lumotlarini, birja ma’lumotlarini va hokazolarni olish uchun biz bog‘lanishimiz va foydalanishimiz mumkin bo‘lgan juda ko‘p qiziqarli bepul APIlar mavjud.
HTTP so‘rovi bilan API chaqirganimizda oladigan javob barcha turdagi ma’lumotlarni o‘z ichiga olishi mumkin, lekin ko‘pincha JSON formatidagi ma’lumotlarni o‘z ichiga oladi.
Misol
Random-data-api.com API dan tasodifiy foydalanuvchi olish uchun tugmani bosish mumkin.
App.vue:
<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>
Oldingi misolimizni tasodifiy foydalanuvchini qulayroq qilib qo‘shish uchun biroz o‘zgartirishimiz mumkin:
Misol
Biz tasodifiy foydalanuvchi nomini <pre> tegida ish nomi va tugma bosilganda rasm bilan birga ko‘rsatamiz.
App.vue:
<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>
<div v-if="data" id="dataDiv">
<img :src="data.avatar" alt="avatar">
<pre>{{ data.first_name + " " + data.last_name }}</pre>
<p>"{{ data.employment.title }}"</p>
</div>
</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>
<style>
#dataDiv {
width: 240px;
background-color: aquamarine;
border: solid black 1px;
margin-top: 10px;
padding: 10px;
}
#dataDiv > img {
width: 100%;
}
pre {
font-size: larger;
font-weight: bold;
}
</style>
"Axios" kutubxonasi bilan Vue-da HTTP so‘rovi
"Axios" JavaScript kutubxonasi bizga HTTP so‘rovlarini ham qilish imkonini beradi.
O‘zingizning mashinangizda misol yaratish va ishga tushirish uchun avval loyiha papkangizdagi terminaldan foydalanib, "axios" kutubxonasini o‘rnatishingiz kerak, masalan:
npm install axios
Tasodifiy foydalanuvchini olish uchun Vue-dagi "axios" kutubxonasidan shunday foydalanishimiz mumkin:
Misol
Buning o‘rniga "axios" kutubxonasi bilan HTTP so‘rovini bajarish uchun oldingi misolga faqat kichik o‘zgarishlar kiritilgan.
App.vue:
<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>
<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>
<style>
#dataDiv {
width: 240px;
background-color: aquamarine;
border: solid black 1px;
margin-top: 10px;
padding: 10px;
}
#dataDiv > img {
width: 100%;
}
pre {
font-size: larger;
font-weight: bold;
}
</style>
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!