vue axios封装

Vue.js 是一款前端框架，而 Axios 是一个基于 Promise 的 HTTP 请求客户端，通常用于发送 Ajax 请求。在Vue.js开发中，经常需要使用 Axios 来进行 HTTP 数据请求，为了更好的维护和使用 Axios，我们可以对其进行封装。下面是一个简单的 Axios 封装示例：

1. 新建一个 axios.js 文件

import axios from 'axios'

// 创建一个 axios 实例
const service = axios.create({
  baseURL: process.env.BASE_API, // 请求的根路径
  timeout: 5000 // 请求超时时间
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 可以在此处添加 token
    return config
  },
  error => {
    console.log(error)
    Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 200) {
      console.log(res.msg)
      return Promise.reject(res.msg || 'Error')
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error)
    return Promise.reject(error)
  }
)

export default service

1. 在 main.js 中引入 axios.js 文件

import axios from './axios.js'

Vue.prototype.$http = axios

1. 在组件中使用封装好的 axios

export default {
  data() {
    return {
      list: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.$http.get('/api/list')
        .then(res => {
          this.list = res.list
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}

以上就是一个简单的 Axios 封装示例，可以根据实际需求适当调整拦截器的逻辑。