VueAxios封装

1、安装Axios：首先，确保你的Vue.js项目中已经安装了Axios。如果没有安装，可以通过以下命令进行安装：

npm install axios

2、创建Axios服务：在你的Vue.js项目中创建一个名为 apiService.js 的文件，用于封装Axios

// apiService.js

import axios from 'axios';

const baseURL = 'http://localhost:8080/api'; // 根据你的实际后端API地址进行修改

const axiosInstance = axios.create({
  baseURL,
  timeout: 10000, // 设置请求超时时间
  headers: {
    'Content-Type': 'application/json', // 设置请求头为JSON格式
  },
});

// 请求拦截器
axiosInstance.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么，例如添加认证信息等
    return config;
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
axiosInstance.interceptors.response.use(
  (response) => {
    // 对响应数据做点什么，例如解析数据或者进行错误处理
    return response.data;
  },
  (error) => {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

export default axiosInstance;

3、在Vue组件中使用Axios服务：现在你可以在你的Vue.js组件中导入并使用 apiService.js 中封装的Axios服务。

// YourComponent.vue

<template>
  <!-- Your component template -->
</template>

<script>
import apiService from './apiService.js';

export default {
  data() {
    return {
      products: [],
    };
  },
  mounted() {
    this.fetchProducts();
  },
  methods: {
    fetchProducts() {
      apiService.get('/products')
        .then(response => {
          this.products = response;
        })
        .catch(error => {
          console.error('Error fetching products:', error);
        });
    },
    // Other methods for handling data...
  }
};
</script>

在这个示例中，我们创建了一个名为 apiService.js 的文件，用于封装Axios，并导出了一个默认的Axios实例。然后，在Vue组件中导入这个Axios服务，并在 mounted 钩子中调用 fetchProducts 方法来获取产品数据。在 fetchProducts 方法中，我们使用封装的Axios服务发送GET请求来获取产品数据，并将返回的数据存储在组件的 products 数据属性中。

这样，你就可以在Vue.js应用中方便地使用封装好的Axios服务来处理HTTP请求。