vue实现ajax

Vue 中实现 AJAX 的方法

使用 axios 发送 AJAX 请求

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

安装 axios：

npm install axios

在 Vue 组件中使用 axios：

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.message;
        });
    }
  },
  mounted() {
    this.fetchPosts();
  }
};

使用 Vue Resource（已弃用）

Vue Resource 是 Vue 官方曾经推荐的 AJAX 库，但目前已不再维护。不建议在新项目中使用。

使用 fetch API

现代浏览器原生支持的 fetch API 也可以用于发送 AJAX 请求，无需额外安装库。

示例：

export default {
  data() {
    return {
      users: [],
      error: null
    };
  },
  methods: {
    async fetchUsers() {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users');
        if (!response.ok) throw new Error('Network response was not ok');
        this.users = await response.json();
      } catch (error) {
        this.error = error.message;
      }
    }
  },
  mounted() {
    this.fetchUsers();
  }
};

使用 Vuex 管理 AJAX 状态

对于复杂应用，建议将 AJAX 请求放在 Vuex actions 中管理：

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    products: [],
    loading: false,
    error: null
  },
  mutations: {
    setProducts(state, products) {
      state.products = products;
    },
    setLoading(state, isLoading) {
      state.loading = isLoading;
    },
    setError(state, error) {
      state.error = error;
    }
  },
  actions: {
    async fetchProducts({ commit }) {
      commit('setLoading', true);
      try {
        const response = await axios.get('https://api.example.com/products');
        commit('setProducts', response.data);
        commit('setError', null);
      } catch (error) {
        commit('setError', error.message);
      } finally {
        commit('setLoading', false);
      }
    }
  }
});

使用 async/await 处理异步

现代 JavaScript 的 async/await 语法可以让异步代码更易读：

methods: {
  async submitForm() {
    try {
      const response = await axios.post('/api/submit', this.formData);
      console.log('Submission successful', response.data);
    } catch (error) {
      console.error('Submission failed', error);
    }
  }
}

拦截器配置

axios 支持请求和响应拦截器，适合处理全局逻辑：

// 请求拦截器
axios.interceptors.request.use(config => {
  // 在发送请求前做些什么
  config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 响应拦截器
axios.interceptors.response.use(response => {
  // 对响应数据做点什么
  return response;
}, error => {
  // 对响应错误做点什么
  if (error.response.status === 401) {
    // 处理未授权情况
  }
  return Promise.reject(error);
});

取消请求

axios 支持取消令牌，可以取消正在进行的请求：

const CancelToken = axios.CancelToken;
let cancel;

methods: {
  fetchData() {
    // 取消之前的请求
    if (cancel) cancel();

    axios.get('/api/data', {
      cancelToken: new CancelToken(c => {
        cancel = c;
      })
    })
    .then(response => {
      // 处理响应
    })
    .catch(thrown => {
      if (axios.isCancel(thrown)) {
        console.log('Request canceled', thrown.message);
      } else {
        // 处理错误
      }
    });
  }
}

这些方法涵盖了 Vue 中实现 AJAX 的主要技术方案，开发者可以根据项目需求选择最适合的方式。