【vue】对axios二次封装

### 回答1：
在Vue项目中，我们通常会使用axios作为HTTP请求库。为了方便使用和代码的可维护性，我们可以对axios进行二次封装。

下面是一个简单的axios二次封装示例：

import axios from 'axios';

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
});

// request拦截器
service.interceptors.request.use(
  config => {
    // 在请求发送之前做一些处理
    return config;
  },
  error => {
    // 发送失败
    console.log(error);
    Promise.reject(error);
  }
);

// response拦截器
service.interceptors.response.use(
  response => {
    // 数据响应之后做一些处理
    return response.data;
  },
  error => {
    // 响应失败
    console.log(error);
    Promise.reject(error);
  }
);

export default service;

在上面的示例中，我们创建了一个axios实例，并对request和response做了一些拦截处理。request拦截器可以在请求发送之前做一些处理，如添加请求头等；response拦截器可以在数据响应之后做一些处理，如对响应数据进行格式化等。

封装好的axios可以在Vue组件中直接使用，如下所示：

import request from '@/utils/request';

export default {
  data() {
    return {
      list: []
    };
  },
  created() {
    this.fetchList();
  },
  methods: {
    fetchList() {
      request.get('/api/list').then(res => {
        this.list = res;
      });
    }
  }
};

通过以上封装，我们可以在不同的Vue组件中方便地发送HTTP请求，而且代码也更加简洁和易于维护。

### 回答2：
Vue是一种流行的前端框架，而axios是一个常用的HTTP请求库，在Vue中进行二次封装axios可以带来很多好处。

axios是一个强大且易用的库，但是在大型项目中，如果直接在组件中使用axios，会导致代码冗余和可维护性降低。因此，我们可以对axios进行二次封装，在整个项目中统一管理和使用。

首先，对axios进行二次封装可以定义一个http.js文件，在该文件中创建一个axios实例，并设置一些默认的配置，例如设置基础URL、请求超时时间等。

接下来，在http.js文件中封装一些常用的请求方法，例如get、post、put、delete等。这些方法可以接收一些参数，例如请求的URL、请求的数据等。在这些方法中，可以根据需要对请求进行一些公共的处理，例如设置请求头信息、处理错误等。封装后的方法可以通过export暴露出来，供其他组件直接使用。

在Vue中使用二次封装的axios非常简单。首先，可以在main.js文件中全局引入http.js文件，这样就可以在整个项目中使用封装好的axios实例了。然后，在需要发送请求的组件中，通过导入http.js文件中封装的方法来发送请求。这样做的好处是，在组件中只需调用封装好的方法，可以避免重复的代码，并且方便对请求进行统一的管理和调试。

总结来说，通过对axios进行二次封装，在Vue项目中可以更好地管理和使用HTTP请求，避免了代码冗余和可维护性降低的问题。封装后的axios实例可以在整个项目中使用，且封装的方法简化了在组件中发送请求的操作，提高了开发效率。

### 回答3：
Vue中使用Axios进行网络请求的时候，可以对其进行二次封装，以方便在项目中的统一使用和管理。二次封装的好处是可以在请求前、请求中和请求后进行一些公共的操作。

在Vue项目中，可以创建一个util文件夹用来存放封装的axios实例。在该文件夹下创建一个request.js文件来封装axios的请求，如下所示：

import axios from 'axios'

// 创建axios实例
const instance = axios.create({
  baseURL: 'http://api.example.com', // 设置请求的基础URL
  timeout: 5000 // 设置超时时间
})

// 请求拦截器
instance.interceptors.request.use(config => {
  // 在请求发送前可以做一些处理，比如在请求头中添加Token
  // config.headers['Authorization'] = 'Bearer token'
  return config
}, error => {
  return Promise.reject(error)
})

// 响应拦截器
instance.interceptors.response.use(response => {
  // 在请求响应后可以做一些处理，比如格式化数据、处理错误码等
  return response.data
}, error => {
  return Promise.reject(error)
})

// 封装get请求
export const get = (url, params) => {
  return instance.get(url, { params })
}

// 封装post请求
export const post = (url, data) => {
  return instance.post(url, data)
}

// 封装put请求
export const put = (url, data) => {
  return instance.put(url, data)
}

// 封装delete请求
export const del = url => {
  return instance.delete(url)
}

这样就完成了对Axios的二次封装，可以在项目中引入该request.js文件并直接使用get、post、put和delete方法来发送网络请求。通过request.js文件的封装，可以统一处理请求的URL、超时时间、请求拦截和响应拦截等，以及实现其他定制化的需求，简化了项目中的网络请求操作。