What are some examples of using async/await in Vue 3?

What are some examples of using async/await in Vue 3?

In Vue 3, async/await can be used to handle asynchronous operations more cleanly. For example, you can fetch data from an API like this:

<script setup>
import { ref } from 'vue';

const data = ref(null);

const fetchData = async () => {
  try {
    const response = await fetch('https://api.example.com/data');
    data.value = await response.json();
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

fetchData();
</script>

Can you explain how error handling works with async/await?

Certainly! Error handling with async/await can be done using try/catch blocks. If an error occurs in the async function, it will be caught in the catch block. Here's an example:

const fetchData = async () => {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

What are the benefits of using async/await over promises?

The main benefits of using async/await over promises include improved readability and easier error handling. Async/await allows you to write asynchronous code that looks synchronous, making it easier to follow the flow of execution.

Can you provide another example of async/await in a Vue 3 component?

Sure! Here's another example where we use async/await to submit a form:

<template>
  <form @submit.prevent="submitForm">
    <input v-model="formData.name" placeholder="Name" />
    <button type="submit">Submit</button>
  </form>
</template>

<script setup>
import { ref } from 'vue';

const formData = ref({ name: '' });

const submitForm = async () => {
  try {
    const response = await fetch('https://api.example.com/submit', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(formData.value),
    });
    if (!response.ok) {
      throw new Error('Submission failed');
    }
    console.log('Form submitted successfully!');
  } catch (error) {
    console.error('Error submitting form:', error);
  }
};
</script>