vue实现ajax

Vue 中实现 AJAX 的几种方法

在 Vue 中实现 AJAX 请求可以通过原生 JavaScript 的 XMLHttpRequest、第三方库如 axios 或 fetch API 来完成。以下是几种常见的实现方式：

使用 axios 发送 AJAX 请求

axios 是一个流行的 HTTP 客户端库，支持 Promise API，适合在 Vue 中使用。

安装 axios：

npm install axios

在 Vue 组件中使用：

import axios from 'axios';

export default {
  data() {
    return {
      posts: [],
      error: null
    };
  },
  methods: {
    fetchPosts() {
      axios.get('https://jsonplaceholder.typicode.com/posts')
        .then(response => {
          this.posts = response.data;
        })
        .catch(error => {
          this.error = error;
        });
    }
  },
  mounted() {
    this.fetchPosts();
  }
};

使用 fetch API 发送 AJAX 请求

fetch 是浏览器原生提供的 API，无需额外安装库。

示例代码：

export default {
  data() {
    return {
      posts: [],
      error: null
    };
  },
  methods: {
    fetchPosts() {
      fetch('https://jsonplaceholder.typicode.com/posts')
        .then(response => {
          if (!response.ok) {
            throw new Error('Network response was not ok');
          }
          return response.json();
        })
        .then(data => {
          this.posts = data;
        })
        .catch(error => {
          this.error = error;
        });
    }
  },
  mounted() {
    this.fetchPosts();
  }
};

使用 Vue Resource 发送 AJAX 请求

Vue Resource 是 Vue 官方曾经推荐的 HTTP 客户端库，但目前已不再维护。

安装 Vue Resource：

npm install vue-resource

在 Vue 中使用：

import Vue from 'vue';
import VueResource from 'vue-resource';

Vue.use(VueResource);

export default {
  data() {
    return {
      posts: [],
      error: null
    };
  },
  mounted() {
    this.$http.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        this.posts = response.data;
      })
      .catch(error => {
        this.error = error;
      });
  }
};

使用 async/await 语法

结合 async/await 可以使异步代码更加清晰。

示例代码：

export default {
  data() {
    return {
      posts: [],
      error: null
    };
  },
  methods: {
    async fetchPosts() {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
        this.posts = response.data;
      } catch (error) {
        this.error = error;
      }
    }
  },
  mounted() {
    this.fetchPosts();
  }
};

在 Vuex 中发送 AJAX 请求

在大型项目中，通常会在 Vuex 中管理 AJAX 请求。

示例代码：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    posts: [],
    error: null
  },
  mutations: {
    setPosts(state, posts) {
      state.posts = posts;
    },
    setError(state, error) {
      state.error = error;
    }
  },
  actions: {
    async fetchPosts({ commit }) {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
        commit('setPosts', response.data);
      } catch (error) {
        commit('setError', error);
      }
    }
  }
});

在组件中调用：

export default {
  computed: {
    posts() {
      return this.$store.state.posts;
    },
    error() {
      return this.$store.state.error;
    }
  },
  mounted() {
    this.$store.dispatch('fetchPosts');
  }
};

注意事项

• 错误处理：始终捕获 AJAX 请求中的错误，避免未处理的异常。
• 加载状态：可以添加加载状态来改善用户体验。
• 取消请求：在组件销毁时取消未完成的请求，避免内存泄漏。

axios 取消请求示例：

const CancelToken = axios.CancelToken;
let cancel;

export default {
  methods: {
    fetchPosts() {
      axios.get('https://jsonplaceholder.typicode.com/posts', {
        cancelToken: new CancelToken(c => {
          cancel = c;
        })
      })
        .then(response => {
          this.posts = response.data;
        })
        .catch(error => {
          if (axios.isCancel(error)) {
            console.log('Request canceled', error.message);
          } else {
            this.error = error;
          }
        });
    }
  },
  beforeDestroy() {
    cancel('Component unmounted, request canceled');
  }
};