vue实现多个方法异步

异步方法的基本实现

在 Vue 中实现多个异步方法可以通过 async/await 或 Promise 链式调用。以下是一个使用 async/await 的示例：

methods: {
  async fetchData1() {
    const response = await axios.get('/api/data1');
    return response.data;
  },
  async fetchData2() {
    const response = await axios.get('/api/data2');
    return response.data;
  },
  async loadAllData() {
    const data1 = await this.fetchData1();
    const data2 = await this.fetchData2();
    console.log(data1, data2);
  }
}

并行执行异步方法

如果需要并行执行多个异步方法以提高效率，可以使用 Promise.all：

methods: {
  async loadAllDataParallel() {
    const [data1, data2] = await Promise.all([
      this.fetchData1(),
      this.fetchData2()
    ]);
    console.log(data1, data2);
  }
}

处理错误

在异步操作中捕获错误可以通过 try/catch 实现：

methods: {
  async loadAllDataWithErrorHandling() {
    try {
      const [data1, data2] = await Promise.all([
        this.fetchData1(),
        this.fetchData2()
      ]);
      console.log(data1, data2);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  }
}

结合 Vue 生命周期

在 Vue 组件的生命周期钩子中调用异步方法：

created() {
  this.loadAllData();
}

使用 Vuex 管理异步状态

如果项目使用 Vuex，可以将异步逻辑放在 actions 中：

// store.js
actions: {
  async fetchAllData({ commit }) {
    const [data1, data2] = await Promise.all([
      axios.get('/api/data1'),
      axios.get('/api/data2')
    ]);
    commit('SET_DATA1', data1);
    commit('SET_DATA2', data2);
  }
}

组件中调用 Vuex 异步方法

在组件中通过 mapActions 调用 Vuex 的异步方法：

import { mapActions } from 'vuex';

methods: {
  ...mapActions(['fetchAllData']),
  async initData() {
    await this.fetchAllData();
  }
}

使用 Loading 状态

在异步操作期间显示加载状态：

data() {
  return {
    isLoading: false
  };
},
methods: {
  async loadWithLoading() {
    this.isLoading = true;
    try {
      await this.loadAllData();
    } finally {
      this.isLoading = false;
    }
  }
}