درخواست HTTP (HTTP Request)
درخواست HTTP یعنی پیامِ رفت وآمد بین «کلاینت (Client)» و «سرور (Server)». مرورگر، درخواست می فرستد و پاسخ می گیرد. در Vue هم با جاوااسکریپت همین کار را می کنیم.
مرور سریع HTTP
HTTP یعنی Hyper Text Transfer Protocol. مرورگر همیشه پشت صحنه درخواست می فرستد. روش های رایج عبارت اند از GET، POST، PUT، PATCH و DELETE.
گرفتن داده با fetch()
تابع fetch() یک «Promise» برمی گرداند. اگر مستقیم مقدارش را بگذاری، فقط [object Promise] می بینی. باید صبر کنی تا پاسخ برسد.
<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>
استفاده از async/await
برای صبر کردن، جلوی fetch از await استفاده کن. همچنین باید متد را async تعریف کنی.
<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>
خواندن متن پاسخ
برای گرفتن متن فایل، از response.text() استفاده کن. این هم Promise است؛ پس await لازم است.
<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 از فایل
اگر فایل .json باشد، به جای text() از json() استفاده کن. خروجی، شیء جاوااسکریپتی است.
<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
می توانی یکی از نتایج را تصادفی نشان بدهی. مثل انتخاب اسم از لیست کلاس.
<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 یعنی Application Programming Interface. معمولاً پاسخ ها 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>
نمایش کاربر به شکل دوستانه
نام و شغل و تصویر را نمایش بده. مثل کارت دانش آموزی.
<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>
درخواست HTTP با کتابخانه axios
کتابخانه axios هم درخواست می فرستد. فقط ابتدا نصبش کن و سپس از axios.get استفاده کن.
<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>
گام های عملی
- آدرس درست منبع را مشخص کن.
- متد را async تعریف کن.
- await جلوی fetch یا axios.get بگذار.
- از text() یا json() برای بدنه استفاده کن.
نکته: خطاها را مدیریت کن؛ مثلاً try/catch. همچنین پاسخ های سنگین را در UI سبک نمایش بده.
جمع بندی سریع
- fetch یک Promise برمی گرداند.
- await برای صبر تا پاسخ است.
- text() متن می دهد؛ json() شیء می دهد.
- axios هم گزینه خوب و ساده ای است.
مطالب مرتبط: Teleport در Vue، ارجاع ها (Refs)، و درخواست HTTP.