Если это название вас немного сбивает с толку, пристегнитесь и пойдем со мной, чтобы узнать о функции Suspense в Vue 3, которая сделает ваши приложения Vue намного более удобными в обслуживании и удобными для пользователя.
Прежде чем мы начнем, в этой статье предполагается, что вы знакомы с промисами Vue и JavaScript.
При разработке веб-приложений выполнение вызовов API к внешней базе данных, источнику файла или другому веб-ресурсу не является чем-то новым для большинства разработчиков интерфейсов. Фактически, эти вызовы API необходимы нашим приложениям для улучшения общей функциональности приложения и могут значительно улучшить общее приложение для наших пользователей.
Как мы знаем, выполнение этих вызовов сделает наш код нелинейным, так как нам придется ждать, пока эти вызовы фактически вернут предполагаемые данные, прежде чем мы сможем продолжить остальную часть кода.
В JavaScript мы используем обещания, чтобы дождаться возврата данных в наше приложение.
Вот как это будет выглядеть
const url = "https://www.boredapi.com/api/activity";
async function getBoredActivity() {
await axios.get(url)
.then(response => {
// Handle the response data
console.log('Bored? Maybe you should:', response.data.activity);
})
.catch(error => {
// Handle any errors that occurred during the API call
console.error('Error:', error);
});
}
// Call the function to get a bored activity
getBoredActivity();
console.log("Hopefully you're not bored now!");
В этом фрагменте кода мы используем библиотеку axios для выполнения вызовов API к скучному API.
В приведенном выше примере функция, которая вызывает API, определена как asynchronous или async для краткости, а ключевое слово await написано перед экземпляром axios, чтобы указать нашему компилятору дождаться, пока вызов API действительно вернет некоторые данные, прежде чем продолжить. с остальной частью нашего кода. Если обещание разрешено (успешно), то мы выполняем любую логику, которую хотим, с возвращенными данными в блоке .then(), в противном случае мы используем .catch() блок для обработки отклоненных обещаний (неудачных вызовов).
Вот вывод, который вы должны увидеть в своей консоли.
Довольно просто, правда?
Давайте придумаем более сложный сценарий. Что, если вы сделаете вызов API к огромному ресурсу, который, как ожидается, вернет тысячи и тысячи строк/фрагментов данных. В зависимости от вашей пропускной способности, скорости Интернета и других факторов, таких как аппаратное обеспечение сервера, вы / ваш пользователь можете некоторое время ждать, прежде чем данные поступят в ваш браузер.
Во время ожидания мы не хотим, чтобы люди смотрели на пустой экран, не так ли?
В VueJS это легко решается с помощью операторов if-else.
<!DOCTYPE html>
<html>
<head>
<title>VueJs Demo Example</title>
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<div v-if="loading">
Retrieving your data... this may take a while
</div>
<div v-else>
{{ activity }}
</div>
</div>
<script>
const app = Vue.createApp({
data() {
return {
activity: '',
loading: true,
}
},
async mounted() {
try {
const response = await axios.get('https://www.boredapi.com/api/activity');
this.activity = response.data.activity;
} catch (error) {
console.error('Error:', error);
}
this.loading = false;
}
});
app.mount('#app');
</script>
</body>
</html>
Из приведенного выше видно, что мы используем поведение await/async, чтобы дождаться, пока вызов API вернет некоторые данные, прежде чем переходить к следующим строкам кода.
Таким образом, пока данные извлекаются с сервера, пользователь увидит сообщение «Извлечение ваших данных… это может занять некоторое время» из-за loading = true . Как только данные будут загружены в приложение, значение loading станет false , и, таким образом, пользователи смогут увидеть возвращенные данные, отображаемые на экране.
Для вашего собственного приложения вы даже можете выбрать отображение компонента загрузки вместо простого сообщения о загрузке.
Хотя это отличное решение, в Vue 3 есть функция, которая делает это еще проще!
Введите: Приостановка
С компонентом Suspense в Vue 3 нам не нужно объявлять операторы if-else в нашем шаблоне, а также нам не нужно объявлять пользовательскую переменную.
Вот как будет выглядеть предыдущий пример кода с компонентом Suspense.
<!DOCTYPE html>
<html>
<head>
<title>VueJs Demo Example</title>
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<suspense>
<template #default>
<p>Retrieving your data... this may take a while</p>
</template>
<template #fallback>
<p>Loading...</p>
</template>
</suspense>
</div>
<script>
const app = Vue.createApp({
data() {
return {
activity: '',
loading: true,
}
},
async mounted() {
try {
const response = await axios.get('https://www.boredapi.com/api/activity');
this.activity = response.data.activity;
} catch (error) {
console.error('Error:', error);
}
this.loading = false;
}
});
app.mount('#app');
</script>
</body>
</html>
С Suspense все, что нам нужно сделать, это обернуть наш шаблон компонентом <suspense> и объявить два элемента шаблона, #default и #fallback .
Как вы, возможно, догадались, мы помещаем любой загружаемый компонент/сообщение, которое мы хотим, чтобы пользователи видели в ожидании данных, внутри шаблона #fallback, и мы отображаем наши данные в шаблоне #default.
Это так просто! Теперь вы готовы включить этот мощный компонент в свои приложения Vue.
Некоторые ресурсы для дальнейшего/дополнительного обучения:
