vue封装axios的几种方法

下面是“Vue封装Axios的几种方法”的完整攻略：

1. 为什么要封装Axios

在Vue项目中，使用Axios发送请求已经成为了常态。但是如果每次请求都手动编写Axios的代码，将会极大地降低开发效率，并且还容易导致代码重复。因此，我们需要封装Axios的代码，统一管理请求。另外，通过封装，还可以添加统一的请求头、响应拦截器等功能，提高代码的可维护性和安全性。

2. 封装Axios的几种方法

方法一：拦截器封装

在这种方法中，我们可以通过创建一个http.js文件来封装Axios代码。其中，拦截器用于处理请求头和响应数据，提升代码复用性和可维护性。

下面是一个简单的示例：

// http.js

import axios from 'axios'

const http = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL,
  timeout: 30000
})

// 请求拦截器
http.interceptors.request.use(config => {
  // 在请求头添加认证信息
  config.headers.Authorization = 'Bearer ' + localStorage.getItem('token')
  return config
}, error => {
  return Promise.reject(error)
})

// 响应拦截器
http.interceptors.response.use(response => {
  // 在这里可以处理响应数据，在组件中直接返回response.data即可
  return response
}, error => {
  // 在这里可以处理错误信息
  return Promise.reject(error)
})

export default http

我们可以在组件中直接引用该模块，例如：

// HelloWorld.vue

import http from '@/utils/http'

export default {
  async mounted() {
    try {
      const response = await http.get('/api/v1/users')
      console.log(response.data)
    } catch (error) {
      console.error(error)
    }
  }
}

方法二：类封装

在这种方法中，我们可以创建一个Axios类，通过class的方式封装Axios代码。这种方式可以更加灵活地管理Axios代码，也可以方便地提供Axios实例。

下面是一个简单的示例：

// http.js

import axios from 'axios'

class Http {
  constructor() {
    this.instance = axios.create({
      baseURL: process.env.VUE_APP_API_BASE_URL,
      timeout: 30000
    })

    this.instance.interceptors.request.use(config => {
      // 在请求头添加认证信息
      config.headers.Authorization = 'Bearer ' + localStorage.getItem('token')
      return config
    }, error => {
      return Promise.reject(error)
    })

    this.instance.interceptors.response.use(response => {
      // 在这里可以处理响应数据，在组件中直接返回response.data即可
      return response
    }, error => {
      // 在这里可以处理错误信息
      return Promise.reject(error)
    })
  }

  async get(url, config) {
    try {
      const response = await this.instance.get(url, config)
      return response.data
    } catch (error) {
      return Promise.reject(error)
    }
  }

  async post(url, data, config) {
    try {
      const response = await this.instance.post(url, data, config)
      return response.data
    } catch (error) {
      return Promise.reject(error)
    }
  }
}

export default new Http()

我们可以在组件中直接引用该模块，例如：

// HelloWorld.vue

import http from '@/utils/http'

export default {
  async mounted() {
    try {
      const response = await http.get('/api/v1/users')
      console.log(response)
    } catch (error) {
      console.error(error)
    }
  }
}

3. 结语

以上是“Vue封装Axios的几种方法”的完整攻略。无论是拦截器封装还是类封装，各有利弊，需要根据实际情况选择适合自己的方式。在使用中，还需要注意统一异常处理，保证代码的安全性和可维护性。