Использование async/await в JavaScript с Vue.js

В этом руководстве мы рассмотрим, как использовать конструкции async/await в JavaScript вместе с фреймворком Vue.js. Async/await позволяет нам писать асинхронный код, который выглядит и ведет себя как синхронный, делая его более читаемым и понятным.

Что такое async/await?

async и await – это ключевые слова в JavaScript, которые облегчают работу с асинхронным кодом. Они используются для работы с промисами (Promise) и позволяют писать асинхронный код, который выглядит как синхронный.

• async: указывает, что функция является асинхронной и возвращает промис.
• await: используется для ожидания выполнения промиса в асинхронной функции. Оно приостанавливает выполнение функции до тех пор, пока промис не будет выполнен.

Пример с использованием Vue.js

Для демонстрации использования async/await в Vue.js создадим простое приложение, которое получает данные из удаленного API и отображает их на странице.

1. Создание проекта

Сначала установите и настройте проект Vue.js, используя Vue CLI:

npm install -g @vue/cli
vue create async-await-example
cd async-await-example
npm run serve

2. Создание компонента

Создайте файл src/components/UserList.vue и добавьте следующий код:

<template>
  <div>
    <h2>Список пользователей</h2>
    <ul v-if="users.length">
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
    <p v-else>Загрузка данных...</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [],
    };
  },
  async created() {
    try {
      // Загружаем данные о пользователях
      this.users = await this.fetchUsers();
    } catch (error) {
      console.error("Ошибка при загрузке данных:", error);
    }
  },
  methods: {
    async fetchUsers() {
      // Получаем данные из API
      const response = await fetch("https://jsonplaceholder.typicode.com/users");
      // Если запрос выполнен успешно, возвращаем данные
      if (response.ok) {
        return await response.json();
      } else {
        // В противном случае выбрасываем ошибку
        throw new Error("Ошибка при загрузке данных");
      }
    },
  },
};
</script>

В этом примере мы используем async/await в двух местах:

1. В хуке жизненного цикла created(), где мы загружаем данные о пользователях.
2. В методе fetchUsers(), который делает запрос к API и возвращает данные.

3. Использование компонента

Чтобы использовать компонент UserList в приложении, откройте файл src/App.vue и замените его содержимое следующим кодом:

<template>
  <div id="app">
    <UserList />
  </div>
</template>

<script>
import UserList from "@/components/UserList.vue";

export default {
  components: {
    UserList,
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Теперь компонент UserList отображается в главном приложении, и вы должны увидеть список пользователей на странице.

Цикл асинхронных вызовов

Как создать цикл асинхронных вызовов dispatch, используя async/await читайте по ссылке.

Обработка ошибок

Когда вы используете async/await, ошибки обрабатываются с помощью блоков try/catch, что делает код более читаемым и понятным.

В примере выше мы обернули вызов this.fetchUsers() в блок try/catch в хуке created(). Если во время выполнения запроса возникнет ошибка, она будет перехвачена и обработана в блоке catch.

Заключение

Async/await позволяет упростить работу с асинхронным кодом в JavaScript и делает его более читаемым и понятным. Вместе с фреймворком Vue.js вы можете создавать мощные и производительные приложения, которые легко обрабатывают асинхронные операции, такие как запросы к API и обработка данных.

В этом руководстве мы разобрали основы использования async/await в Vue.js, создав простой пример приложения, который загружает и отображает список пользователей с удаленного API. Вы можете использовать эти знания для создания своих собственных приложений на Vue.js с использованием асинхронного кода на основе промисов.

Статьи по теме JS Promise

• Использование Promise.all с примерами на VueJs
• Использование async/await в JavaScript с Vue.js
• Создание цикла асинхронных вызовов во Vue.js