当前位置：首页 > VUE

vue如何实现异步请求

2026-02-23 05:13:32VUE

使用 Axios 发送异步请求

Axios 是一个流行的 HTTP 客户端库，适用于 Vue 项目。安装 Axios 后，可以在组件中直接调用其 API 发送请求。

import axios from 'axios';

export default {
  methods: {
    fetchData() {
      axios.get('https://api.example.com/data')
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
}

使用 Vue Resource

Vue Resource 是 Vue 官方早期推荐的 HTTP 客户端，虽然目前已不再维护，但仍可用于旧项目。

vue如何实现异步请求

this.$http.get('https://api.example.com/data')
  .then(response => {
    console.log(response.body);
  }, error => {
    console.error(error);
  });

使用 Fetch API

现代浏览器内置的 Fetch API 也可以用于异步请求，无需额外安装库。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

结合 async/await 语法

使用 async/await 可以让异步代码更易读，避免回调地狱。

vue如何实现异步请求

export default {
  methods: {
    async fetchData() {
      try {
        const response = await axios.get('https://api.example.com/data');
        console.log(response.data);
      } catch (error) {
        console.error(error);
      }
    }
  }
}

在 Vuex 中处理异步请求

在 Vuex 中，通常使用 actions 来处理异步操作，通过 mutations 更新状态。

const store = new Vuex.Store({
  state: {
    data: null
  },
  mutations: {
    setData(state, payload) {
      state.data = payload;
    }
  },
  actions: {
    async fetchData({ commit }) {
      const response = await axios.get('https://api.example.com/data');
      commit('setData', response.data);
    }
  }
});

处理加载状态

在异步请求过程中，通常需要显示加载状态，可以通过变量控制。

export default {
  data() {
    return {
      isLoading: false,
      data: null
    };
  },
  methods: {
    async fetchData() {
      this.isLoading = true;
      try {
        const response = await axios.get('https://api.example.com/data');
        this.data = response.data;
      } catch (error) {
        console.error(error);
      } finally {
        this.isLoading = false;
      }
    }
  }
}