How do I handle errors in Vue.js promises?

How do I handle errors in Vue.js promises?

In Vue.js, you can handle errors in promises using the .catch() method. For example, if you have an API call, you can do something like this:

axios.get('/api/data')
  .then(response => {
    this.data = response.data;
  })
  .catch(error => {
    console.error('Error fetching data:', error);
    this.errorMessage = 'Failed to load data.';
  });

What if I want to handle multiple promises?

You can use Promise.all() to handle multiple promises. If any promise fails, the catch block will handle the error. Here's an example:

Promise.all([promise1, promise2])
  .then(results => {
    this.result1 = results[0];
    this.result2 = results[1];
  })
  .catch(error => {
    console.error('Error in one of the promises:', error);
    this.errorMessage = 'Failed to load one or more data.';
  });

Can I use async/await for error handling?

Yes, you can use async/await with try/catch for error handling. Here's how:

async fetchData() {
  try {
    const response = await axios.get('/api/data');
    this.data = response.data;
  } catch (error) {
    console.error('Error fetching data:', error);
    this.errorMessage = 'Failed to load data.';
  }
}