vue实现ajax请求

使用 axios 实现 AJAX 请求

axios 是一个流行的 HTTP 客户端库，适用于浏览器和 Node.js 环境。在 Vue 项目中，可以通过以下方式使用 axios 发送 AJAX 请求。

安装 axios：

npm install axios

在 Vue 组件中引入并使用：

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 实现 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 {
  methods: {
    fetchData() {
      this.$http.get('https://api.example.com/data')
        .then(response => {
          console.log(response.body);
        }, error => {
          console.error(error);
        });
    }
  }
}

使用 Fetch API 实现 AJAX 请求

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

export default {
  methods: {
    fetchData() {
      fetch('https://api.example.com/data')
        .then(response => {
          if (!response.ok) {
            throw new Error('Network response was not ok');
          }
          return response.json();
        })
        .then(data => {
          console.log(data);
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
}

在 Vue 中使用 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);
      }
    }
  }
}

全局配置 axios

可以在 main.js 中全局配置 axios，方便在整个项目中使用。

import axios from 'axios';

axios.defaults.baseURL = 'https://api.example.com';
Vue.prototype.$http = axios;

然后在组件中直接使用：

export default {
  methods: {
    fetchData() {
      this.$http.get('/data')
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
}

请求拦截器和响应拦截器

axios 支持拦截器，可以在请求或响应被处理前进行统一处理。

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

// 添加响应拦截器
axios.interceptors.response.use(response => {
  // 对响应数据做点什么
  return response;
}, error => {
  // 对响应错误做点什么
  return Promise.reject(error);
});

处理跨域问题

在开发环境中，可以通过配置 vue.config.js 解决跨域问题。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

然后组件中请求时使用相对路径：

axios.get('/api/data')
  .then(response => {
    console.log(response.data);
  });

以上方法涵盖了 Vue 中实现 AJAX 请求的主要方式，可以根据项目需求和个人偏好选择合适的方法。