Vue中使用axios发送请求与封装

在Vue中使用axios发送请求，首先需要安装axios，可以通过以下命令在项目中安装axios：

npm install axios --save

然后在Vue组件中使用axios发送请求，可以按照以下步骤进行：

在组件中引入axios：

import axios from 'axios';

在Vue实例中设置axios的基本配置，比如API的基础URL、请求头等：

Vue.prototype.$http = axios.create({
  baseURL: 'http://api.example.com',
  headers: {
    'Content-Type': 'application/json'
  }
});

在组件中使用axios发送请求，例如获取数据：

export default {
  data() {
    return {
      users: []
    }
  },
  mounted() {
    this.$http.get('/users')
      .then(response => {
        this.users = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
}

这里使用了axios的get方法来获取数据，并将获取到的数据赋值给组件的users属性。

以上就是在Vue中使用axios发送请求的基本步骤。当然，axios还提供了其他请求方法，比如post、put、delete等，可以根据实际需求选择使用。同时，也可以使用axios的拦截器来处理请求和响应，增加请求的安全性和可维护性。

封装axios请求可以使代码更具可读性和可维护性，同时也方便全局统一处理请求错误等情况。以下是一种基本的封装方式：

在src目录下新建api文件夹，用于存放所有API请求相关的文件；
在api文件夹下新建index.js文件，用于导出所有API请求的方法；
在index.js文件中导入axios并创建一个新的axios实例，设置基础URL和其他配置，然后将所有API请求方法导出。
以下是示例代码：

import axios from 'axios';

// 创建一个axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 设置基础URL
  timeout: 5000 // 设置请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在请求发送之前可以做一些处理，比如添加请求头
    return config;
  },
  error => {
    // 请求出错时的处理
    console.log(error);
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 在响应返回之前可以做一些处理，比如判断返回数据的状态码
    return response;
  },
  error => {
    // 响应出错时的处理
    console.log(error);
    return Promise.reject(error);
  }
);

// 导出API请求方法
export function fetchData(params) {
  return service({
    url: '/data',
    method: 'get',
    params
  });
}

export function postData(data) {
  return service({
    url: '/data',
    method: 'post',
    data
  });
}

以上代码中，service实例是一个已经配置好基础URL和拦截器的axios实例。在导出API请求方法时，直接使用service实例来发送请求。在拦截器中可以处理请求和响应的相关信息，比如添加请求头、判断响应状态码等。

封装好API请求方法之后，在Vue组件中直接引入并使用即可，代码更加简洁易懂：

import { fetchData } from '@/api';

export default {
  mounted() {
    fetchData({ id: 1 }).then(response => {
      console.log(response.data);
    }).catch(error => {
      console.log(error);
    });
  }
}

当然，这只是一种基本的封装方式，具体的实现可能会因为项目需求和团队约定而有所不同。