از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
ارسال درخواست های AJAX در Vue.js جاوا اسکریپت غیرهمزمان و XML (AJAX)، راهی برای برقراری ارتباط با یک وب سرور از یک برنامه سمت مشتری از طریق پروتکل HTTP یا HTTPS است. حتی اگر AJAX XML را در نام خود نگه می دارد، روش ارسال داده ها از طریق درخواست یا دریافت نباید XML باشد، بلکه متن ساده است، …
سرفصلهای مطلب
AJAX چیست؟
جاوا اسکریپت ناهمزمان و XML (AJAX)، روشی برای برقراری ارتباط با یک وب سرور از طریق یک برنامه کاربردی سمت سرویس گیرنده است HTTP یا HTTPS پروتکل
حتی اگر AJAX XML را در نام خود نگه می دارد، روش ارسال داده ها از طریق درخواست یا دریافت نباید XML باشد، بلکه متن ساده یا در بیشتر موارد JSON باشد، زیرا سبک تر و بخشی از جاوا اسکریپت در داخل و خارج است. خود
چرا AJAX مفید است؟
Vue.js به عنوان یک فریم ورک فرانت‌اند استفاده می‌شود و اگر می‌خواهید با یک سرور ارتباط برقرار کنید، اطلاعات را در پایگاه داده بازیابی یا ذخیره کنید یا محاسباتی را انجام دهید. روی داده های شما به احتمال زیاد به آن نیاز خواهید داشت AJAX.
بااینکه AJAX را می توان با ایجاد یک استفاده کرد XMLHttpRequest شی، که از طریق مرورگر در دسترس خواهد بود. بسته های خاصی وجود دارد که می تواند به ما در برقراری ارتباط با سرورمان کمک کند.
Vue.js دارای یک بسته رسمی است که به نام vue-resource که به عنوان یک سرویس گیرنده HTTP کار می کند، اما اسناد رسمی پیشنهاد می کند که از آن استفاده کنید Axios.
نصب Axios و راه اندازی یک کامپوننت
Axios یک سرویس گیرنده HTTP است و می توان آن را در ما نصب کرد package.json وابستگی ها از طریق مدیر بسته انتخابی شما NPM یا نخ:
$ npm install axios
OR
$ yarn add axios
پس از نصب، می‌توانیم یک جزء تست حداقلی را برای اهداف نمایشی تنظیم کنیم:
// Test.vue
<template>
<div/>
</template>
<script>
export default {
data() {
return {};
};
}
</script>
استفاده از Axios در Vue Components
درخواست‌هایی که از طریق HTTP به سرور ارسال می‌شوند مدت زمان مشخصی طول می‌کشد تا با یک پاسخ برگردند، و برای اطمینان از صحت اطلاعات نشان‌داده‌شده به کاربر، وعده می دهد قبل از ادامه اجرای کد، باید برای اطمینان از بازگشت داده ها استفاده شود.
برای استفاده از آن در یک جزء، ما به سادگی import بسته و آن را به یک متغیر اختصاص دهید:
// Test.vue
<script>
import axios from "axios";
export default {
data() {
return {};
}
};
</script>
به طور کلی، فراخوانی های API در داخل انجام می شود نصب شده است چرخه عمر Vue hook.
ما قرار است از یک سرویس داده ساختگی JSON به نام استفاده کنیم JSONPlaceholder. این یک شبیه‌سازی است برای اینکه یک نقطه پایانی در هنگام زدن a چگونه به نظر می‌رسد REST API:
// Test.vue
<script>
import axios from "axios";
export default {
data() {
return {};
},
mounted() {
axios.get("https://jsonplaceholder.typicode.com/todos/")
}
};
</script>
در مثال کد بالا، کامپوننت قبل از اطلاعات از ارائه شده است JSONPlaceholder رسیده است. بنابراین، استفاده از وعده‌ها اطمینان حاصل می‌کند که می‌توانیم داده‌ها را مدیریت کنیم و آنها را به دیدگاه خود اضافه کنیم.
مدیریت پاسخ ها با then()
این then() تابع، به ما اجازه می دهد وعده خود را دستکاری کنیم و به کد خود بگوییم که در صورت موفقیت/زمانی که درخواست موفقیت آمیز بود چه کاری انجام خواهیم داد. به عنوان مثال، می توانیم با یک تابع callback، پاسخ خود را در قسمت بررسی کنیم console:
mounted() {
axios.get("https://jsonplaceholder.typicode.com/todos/")
.then(response => console.log(response))
}
پاسخی برگردانده شده است و ما می توانیم آن را در داخل مرورگر ببینیم console، اما چگونه لیست کارها را به کاربر نشان دهیم؟
ما باید لیست کارها را در داخل نگه داریم داده ها شی برای ارجاع آینده در داخل DOM.
ما آن را صدا خواهیم کرد todosList، و با استفاده از جاوا اسکریپت، ویژگی داده شی پاسخ را به روشی تغییرناپذیر کپی می کنیم (به طوری که شی پاسخ واقعی را تغییر ندهیم). گسترش عملگر و فقط 10 عنصر اول را با استفاده از نشان می دهد تکه تابع آرایه، به طوری که ما صدها کار را بارگذاری نکنیم:
<script>
import axios from "axios";
export default {
data() {
return {
todosList: ()
};
},
mounted() {
axios.get("https://jsonplaceholder.typicode.com/todos/")
.then(response => {
this.todosList = (...response.data).slice(0, 10)
})
}
};
</script>
مدیریت خطاها با catch()
اگر درخواست ناموفق باشد چه اتفاقی می افتد؟ وضعیت برنامه باید بر این اساس مدیریت شود. برای آن ما داریم catch() تابع، که می تواند در پشته تابع ما تودرتو باشد:
mounted() {
axios.get("https://jsonplaceholder.typicode.com/todos/")
.then(response => console.log(response))
.catch(err => {
// Manage the state of the application if the request
// has failed
})
}
به این ترتیب، ما می‌بینیم که خطا از شما خواسته می‌شود و می‌توانیم کارهای زیادی با آن انجام دهیم، مانند نمایش یک پیام خطا به کاربر به عنوان هشدار یا نشان دادن کارتی با مضمون «No Todos Available». امکانات بی پایان هستند.
نمایش Todos
با استفاده از v-for دستور Vue می‌توانیم کارهای خود را در قالب تزریق کنیم و برای اهداف بصری مقداری استایل اضافه کنیم:
<template>
<div>
<ul
class="test-list"
v-for="todo in todosList"
:key="todo.id"
>
<li class="test-list--item">
{{ todo.id }}
</li>
</ul>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
todosList: ()
};
},
mounted() {
axios.get("https://jsonplaceholder.typicode.com/todos/")
.then(response => {
this.todosList = (...response.data).slice(0, 10)
})
.catch(err => {
// Manage the state of the application if the request
// has failed
})
}
};
</script>
<style>
.test-list {
font-family: Roboto;
list-style: none;
margin: 20px auto;
width: 50%;
}
.test-list--item {
border: 1px solid rgb(41, 41, 41);
border-radius: 5px;
text-align: center;
display: block;
box-shadow: 2px 2px rgba(138, 124, 124, 0.4);
}
.test-list--id {
font-weight: 300;
margin: 10px auto;
}
.test-list--title {
font-weight: 500;
margin: 20px auto;
text-transform: capitalize;
}
.test-list--complete {
font-weight: 600;
margin: 10px auto;
color: #56ca86;
}
.test-list--incomplete {
font-weight: 600;
margin: 10px auto;
color: #ca5656;
}
</style>
اگر مرورگر خود را بررسی کنیم، چیزی شبیه به این را خواهیم دید:
تبریک می‌گوییم، ما به تازگی یک درخواست HTTP را به یک API ارسال کرده‌ایم و داده‌ها را به کاربر نمایش می‌دهیم!
Async/Await vs Promises
Async/Await یک ساختار زبان نسبتاً جدید از جاوا اسکریپت است که کد ناهمزمان ما را بسیار تمیزتر می کند.
حتی اگر تماس‌های Async/Await در پایان به وعده‌ها تبدیل می‌شوند، اما رویکرد متفاوتی را نشان می‌دهد، زیرا دیگر نیازی به تنظیم توابع پاسخ به تماس برای کد خود نداریم، همه ما می‌دانیم که چقدر از آنها متنفریم!
کد مثال ما، با استفاده از Async/Await چیزی شبیه به زیر خواهد بود، در حالی که مقداری جادوی ساختارشکن شی را اضافه می کنیم تا کد ما حتی بهتر به نظر برسد:
// Test.vue
async mounted() {
const url = 'https://jsonplaceholder.typicode.com/todos/'
const { data } = await axios.get(url)
this.todosList = (...data).slice(0, 10)
}
چرخه عمر نصب شده hook با پیشوند the است async کلمه کلیدی. این تضمین می کند که hook قولی را برمی گرداند
در داخل hook، await کلمه کلیدی باعث می شود تابعی که با آن فراخوانی می شود منتظر ادامه وضوح خود بماند.
نتیجه
AJAX بخش کلیدی توسعه وب مدرن است، و حتی اگر در ابتدا ترسناک به نظر برسد، داشتن آن در زرادخانه شما ضروری است.
ماهیت Vue.js باعث می شود که به طور ناهمزمان درباره کد خود فکر کنید تا بتوانید اجزای خود را به درستی به روز کنید و در نتیجه تجربه فوق العاده ای را به کاربران خود ارائه دهید.
برای اطلاعات بیشتر روی کد ناهمزمان برای Vue، می توانید آن را بررسی کنید کتاب آشپزی Vue.js.
منتشر شده در 1403-01-26 07:00:04
