vuecli项目封装使用axios请求并使用

好的，关于这个问题，我可以给你一些简单的解释和示例代码。

Axios 是一个基于 Promise 的 HTTP 请求库，可以在浏览器和 Node.js 中使用。它提供了一种简单、易于使用的方式来发送 HTTP 请求，并且支持拦截器、请求和响应转换等高级功能。

在 Vue 项目中使用 Axios，一般可以先在项目中安装 Axios：

npm install axios --save

然后在需要使用 Axios 的组件中，可以这样引入和使用：

import axios from 'axios'

// 发送 GET 请求
axios.get('/api/user').then(response => {
  console.log(response.data)
}).catch(error => {
  console.log(error)
})

// 发送 POST 请求
axios.post('/api/user', { name: 'John' }).then(response => {
  console.log(response.data)
}).catch(error => {
  console.log(error)
})

其中，`/api/user` 是你要请求的 API 地址，`get` 和 `post` 分别表示发送 GET 和 POST 请求。在请求成功和失败的回调中，分别可以获取到响应数据和错误信息。

另外，为了方便管理和统一处理请求，可以在项目中创建一个 Axios 实例，并对其进行封装。例如：

import axios from 'axios'

const api = axios.create({
  baseURL: '/api',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json'
  }
})

// 请求拦截器
api.interceptors.request.use(config => {
  // 在请求发送之前，可以对请求做一些处理，例如添加请求头、验证用户信息等
  return config
}, error => {
  // 如果请求错误，可以在这里进行统一处理，例如提示用户、重试请求等
  return Promise.reject(error)
})

// 响应拦截器
api.interceptors.response.use(response => {
  // 在获取响应数据之前，可以对响应做一些处理，例如解密数据、转换格式等
  return response
}, error => {
  // 如果响应错误，可以在这里进行统一处理，例如提示用户、重试请求等
  return Promise.reject(error)
})

export default api

在这个示例中，我们创建了一个名为 `api` 的 Axios 实例，并在其中添加了请求拦截器和响应拦截器。这样，在每次发送请求和获取响应时，都会先经过这些拦截器，可以在其中进行一些共通的处理。

接下来，在组件中使用这个经过封装的 Axios 实例，可以像这样：

import api from '@/api'

// 发送 GET 请求
api.get('/user').then(response => {
  console.log(response.data)
}).catch(error => {
  console.log(error)
})

// 发送 POST 请求
api.post('/user', { name: 'John' }).then(response => {
  console.log(response.data)
}).catch(error => {
  console.log(error)
})

这样，我们就可以在 Vue 项目中方便地使用 Axios 进行 HTTP 请求了。