vue实现异步交互

Vue 实现异步交互的方法

使用 axios 发送 HTTP 请求

安装 axios 并导入到 Vue 项目中：

npm install axios

在组件中使用 axios 发送异步请求：

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);
        });
    }
  }
}

使用 async/await 简化异步代码

结合 async/await 可以更清晰地处理异步逻辑：

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);
      }
    }
  }
}

使用 Vue 的 $http 或全局配置

在 main.js 中全局配置 axios：

import axios from 'axios';
Vue.prototype.$http = axios;

组件内直接通过 this.$http 调用：

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

结合 Vuex 管理异步状态

在 Vuex 中定义异步 action：

actions: {
  async fetchData({ commit }) {
    try {
      const response = await axios.get('https://api.example.com/data');
      commit('SET_DATA', response.data);
    } catch (error) {
      console.error(error);
    }
  }
}

组件中通过 dispatch 触发：

this.$store.dispatch('fetchData');

使用 fetch API

原生 fetch 的用法：

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

处理加载状态

在组件中管理加载状态：

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;
      } finally {
        this.isLoading = false;
      }
    }
  }
}

取消请求

使用 axios 的取消令牌：

const CancelToken = axios.CancelToken;
let cancel;

export default {
  methods: {
    fetchData() {
      axios.get('https://api.example.com/data', {
        cancelToken: new CancelToken(c => cancel = c)
      });
    },
    cancelRequest() {
      cancel();
    }
  }
}