vue项目封装axios

在Vue项目中，我们通常会使用axios来进行接口请求。为了方便使用和维护，我们可以将axios进行封装，使其可以全局使用。下面是一个简单的封装axios的方法：

1. 在src目录下新建一个api文件夹，用于存放所有的接口请求相关文件。
2. 在api文件夹下新建一个api.js文件，用于封装axios。
3. 在api.js文件中引入axios，并设置axios的一些默认配置，例如设置请求超时时间、设置请求头等。
4. 在api.js文件中定义一个apiFun函数，用于发送请求。这个函数可以接收三个参数：请求地址、请求参数和请求方法（get、post等）。
5. 在api.js文件中使用axios发送请求，并返回一个Promise对象，以便在调用apiFun函数时可以使用async/await语法。
6. 在main.js文件中全局引入api.js，并将apiFun函数挂载到Vue原型上，以便在组件中可以直接使用this.$apiFun来发送请求。

下面是一个简单的示例代码：

// api.js

import axios from 'axios'

axios.defaults.timeout = 5000
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

const apiFun = (url, params = {}, method = 'get') => {
  return new Promise((resolve, reject) => {
    axios({
      method: method,
      url: url,
      data: method === 'post' ? params : null,
      params: method === 'get' ? params : null
    }).then(res => {
      resolve(res.data)
    }).catch(err => {
      reject(err)
    })
  })
}

export default apiFun

// main.js

import Vue from 'vue'
import apiFun from '@/api/api.js'

Vue.prototype.$apiFun = apiFun

使用示例：

// 在组件中使用

async getData () {
  try {
    const res = await this.$apiFun('/api/getData', { id: 1 }, 'get')
    console.log(res)
  } catch (err) {
    console.log(err)
  }
}