vue实现异步函数

Vue 中实现异步函数的几种方法

使用 async/await

在 Vue 方法或生命周期钩子中可以直接使用 async/await 语法处理异步操作。这种方式代码更清晰，易于理解。

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

使用 Promise

对于不支持 async/await 的环境或需要更细粒度控制的情况，可以使用 Promise。

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

结合 Vue 生命周期

在 created 或 mounted 等生命周期钩子中调用异步方法。

created() {
  this.fetchData();
},
methods: {
  async fetchData() {
    const response = await axios.get('/api/data');
    this.data = response.data;
  }
}

使用 Vuex 管理异步状态

在大型应用中，建议使用 Vuex 集中管理异步状态。

// store.js
actions: {
  async fetchData({ commit }) {
    const response = await axios.get('/api/data');
    commit('SET_DATA', response.data);
  }
}

// component
methods: {
  ...mapActions(['fetchData']),
  loadData() {
    this.fetchData();
  }
}

处理加载状态

通常需要显示加载状态，可以结合 data 属性或计算属性。

data() {
  return {
    isLoading: false,
    data: null
  }
},
methods: {
  async fetchData() {
    this.isLoading = true;
    try {
      const response = await axios.get('/api/data');
      this.data = response.data;
    } finally {
      this.isLoading = false;
    }
  }
}

并行执行多个异步请求

使用 Promise.all 并行执行多个异步请求。

methods: {
  async fetchAllData() {
    const [users, posts] = await Promise.all([
      axios.get('/api/users'),
      axios.get('/api/posts')
    ]);
    this.users = users.data;
    this.posts = posts.data;
  }
}

使用 watch 监听异步数据变化

当需要响应数据变化执行异步操作时，可以使用 watch。

watch: {
  searchQuery: {
    handler: async function(newVal) {
      const response = await axios.get(`/api/search?q=${newVal}`);
      this.results = response.data;
    },
    immediate: true
  }
}

取消异步请求

对于可能需要取消的请求，可以使用 axios 的 CancelToken。

data() {
  return {
    cancelToken: null
  }
},
methods: {
  fetchData() {
    if (this.cancelToken) {
      this.cancelToken.cancel();
    }
    this.cancelToken = axios.CancelToken.source();
    axios.get('/api/data', {
      cancelToken: this.cancelToken.token
    }).then(response => {
      this.data = response.data;
    }).catch(thrown => {
      if (!axios.isCancel(thrown)) {
        console.error(thrown);
      }
    });
  }
}

这些方法覆盖了 Vue 中处理异步操作的主要场景，可以根据具体需求选择合适的方式。