Используйте Vue.js 3 Suspense API для обработки асинхронных обещаний
Vue.js 3 имеет несколько удивительных функций. Одна из его особенностей - это граница компонентов API приостановки. API приостановки пригодится, когда вы хотите обрабатывать некоторые асинхронные запросы.
Возьмем, к примеру, мы получаем некоторые данные из конечной точки API и хотим показать клиенту какое-то резервное сообщение, когда выполняется соответствующее обещание. Мы можем использовать API ожидания для выполнения такой задачи.
API ожидания позволяет нам обрабатывать обещания и показывать резервный контент над другими компонентами, а не локально в отдельном компоненте.
Почему Susse API
- Легко отображать резервные сообщения и контент во время загрузки.
- Может помочь показать, когда обещания выполнены и готовы к отрисовке.
- Помогите управлять различными разделами просмотра.
Настройка API приостановки в компоненте.
Создайте компонент и назовите его movies.vue. Внутри у нас будет фрагмент кода, показанный ниже.
Кроме того, нам нужно будет импортировать ref для обеспечения реактивности состояний наших компонентов. Итак, из приведенного выше фрагмента кода мы выполняем асинхронный вызов API к конечной точке, чтобы получить данные о фильмах.
Для выполнения HTTP-запроса вы можете использовать fetch или Axios в зависимости от вашего предпочтительного метода, но в нашем случае здесь мы будем использовать выборку.
Хорошо, теперь у нас есть возможности, теперь мы хотим, чтобы API ожидания показывал резервные сообщения внутри приложения.
Внутри нашего файла app.vue у нас будет наш код, как показано во фрагменте кода ниже.
Итак, мы импортируем наш компонент фильмов и создаем вокруг него границу компонента саспенсного API. Кроме того, не забудьте импортировать API приостановки из vue, чтобы vue пока не выдал нам ошибку.
Из приведенного выше фрагмента кода нам нужно создать шаблон внутри границы API приостановки. Компонент начального шаблона с #default - это компонент, который появится, когда обещание будет выполнено и все будет выполнено успешно.
Шаблон с #fallback - это компонент, который будет отображаться пользователю, когда обещание еще не выполнено, и действовать как резервный компонент. Теперь сообщение, которое мы предоставляем в шаблоне #fallback, будет отображаться пользователю до тех пор, пока обещание не будет выполнено.
API приостановки может быть удобен, когда вы хотите показать аварийное сообщение, когда выполняются обещания.
Примечание
API приостановки - это новая функция Vue.js 3, которая все еще находится в стадии экспериментов. Настоятельно рекомендуется не использовать в производственной среде.
Спасибо, что дочитали эту статью до сих пор, надеюсь, вы нашли ее полезной.
Ресурсы
Документация Vue.js
Https://v3.vuejs.org/guide/migration/suspense API.html # child-updates
Другие материалы
Больше контента на plainenglish.io
