如何在Vue.js中的.then() .catch()之前使用if else？

<template>
  <div>
    <!-- Your template here -->
  </div>
</template>

<script>
export default {
  name: 'YourComponent',
  methods: {
    async fetchData() {
      const shouldFetch = true; // 这里可以是任何决定你是否要执行异步操作的条件

      if (shouldFetch) {
        // 执行异步操作
        someAsyncFunction()
          .then((response) => {
            // 处理成功的情况
            console.log('Data fetched successfully:', response);
          })
          .catch((error) => {
            // 处理错误的情况
            console.error('Error fetching data:', error);
          });
      } else {
        // 如果条件不满足，可以在这里处理其他逻辑
        console.log('Fetching data skipped.');
      }
    }
  },
  mounted() {
    this.fetchData();
  }
};

// 假设这是一个返回Promise的异步函数
function someAsyncFunction() {
  return new Promise((resolve, reject) => {
    // 模拟异步操作
    setTimeout(() => {
      const success = Math.random() > 0.5; // 随机决定成功或失败
      if (success) {
        resolve('Some data');
      } else {
        reject(new Error('Failed to fetch data'));
      }
    }, 1000);
  });
}
</script>