Как использовать 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
    }
  }

}