Как использовать Async/Await с компонентами Vue.js

Поначалу может быть непонятно, как разобраться с однофайловыми шаблонами Vue и как использовать функции javascript, которые вы знаете.
Хук created
Созданный хук - это хук жизненного цикла, метод, который вызывается при первом создании шаблона, но до его монтирования.
Объявляем метод created()
как асинхронный и выполняем асинхронные действия внутри него. В этом примере мы загружаем список пользователей:
export default { data () { return { users: null } }, async created () { const response = await fetch("https://reqres.in/api/users") const { data: users } = await response.json() this.users = users } }
Хук mounted
Хук mounted почти идентичен хуку created, но срабатывает после того, как компонент был установлен (добавлен в DOM). Созданный хук обычно предпочтительнее для вызовов API.
Как и выше, мы можем просто сделать метод mounted () асинхронным.
export default { data () { return { users: null } }, async mounted () { const response = await fetch("https://reqres.in/api/users") const { data: users } = await response.json() this.users = users } }
Методы
Vue позволяет любому методу быть асинхронным методом. Вот пример с данными, запрашиваемыми при нажатии на кнопку.
<button @click="loadUsers">Load Users</button> <div v-if="users">{{ users }}</div>
export default { data () { return { users: null } }, methods: { async loadUsers () { const response = await fetch("https://reqres.in/api/users") const { data: users } = await response.json() this.users = users } } }
Computed свойства
Вычисляемые свойства являются исключением, Vue не позволяет им быть асинхронными. Есть способы обойти это ограничение, например, плагин vue-async-computed, но это не лучшая практика.
Если нужно асинхронное вычисляемое свойство, то, скорее всего, допущена архитектурная ошибка в компоненте. С опытом становится привычно работать с вычисляемыми свойствами, как с чисто синхронными функциями. Все асинхронные операции должны выполняться в методах.
Если все ещё нужно асинхронное вычисляемое свойство, попробуйте вместо него использовать наблюдатель (watchers).
Watchers (наблюдатели)
Наблюдатели могут выполнять асинхронные операции, когда они обнаруживают изменения в данных. Поэтому наблюдатели могут заставить вычисляемые свойства обновляться асинхронно.
Вот пример, в котором вычисляемый параметр возвращает количество пользователей. Watcher перезагружает список пользователей, как только фильтр userRoles изменяется.
export default { data () { return { userRoles: ['admin'], users: [...] } }, watch: { async userRoles (newRoles) { const query = JSON.stringify(newRoles) const response = await fetch(`https://reqres.in/api/users?roles=${query}`) const { data: users } = await response.json() this.users = users } }, computed: { userCount () { return this.users.length } } }