在Vue中是如何封装axios

在Vue中，axios库通常用于进行网络请求。为了方便代码复用和管理，我们可以将axios进行封装，封装后的axios可以配置全局的拦截器、预设基础路径、统一处理错误响应等。下面是封装axios的完整攻略：

1. 安装axios

在封装axios之前，我们首先需要安装axios库。在项目根目录下打开终端，输入以下命令进行安装：

npm install axios --save

2. 创建axios实例

在Vue应用的入口文件（如main.js）中，我们可以创建一个axios实例，并设置一些默认的配置选项，如请求的基础路径、请求数据格式等。在创建axios实例后，我们可以对其进行全局配置和拦截器的配置等操作。

import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://localhost:3000/api',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  }
})

export default instance

在上面的代码中，我们通过axios.create()方法创建了一个axios实例，并设置了基础路径为http://localhost:3000/api，超时时间为 10 秒，请求头中的Content-Type为application/json;charset=utf-8。

3. 全局配置

在全局配置中，我们可以为axios实例设置一些全局的配置选项，以确保所有请求都能够按照统一的方式进行处理。例如，我们可以设置请求拦截器、响应拦截器、错误处理等。下面是一个全局配置的示例：

import axios from 'axios'
import router from '@/router'
import store from '@/store'

const instance = axios.create({
  baseURL: 'http://localhost:3000/api',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  }
})

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    config.headers.Authorization = store.state.token
    return config
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error)
  })

// 响应拦截器
instance.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    if (response.data.code === 200) {
      return response.data
    } else if (response.data.code === 401) {
      router.push('/login')
    } else {
      return Promise.reject(response.data.msg)
    }
  },
  error => {
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)

export default instance

在上面的代码中，我们在实例中设置了请求拦截器和响应拦截器。请求拦截器中，我们在发送请求前设置了Authorization请求头，用于传递登录后的Token信息；响应拦截器中，我们对响应数据进行了统一的处理，如判断响应状态码、处理响应数据等。如果响应状态码为200，则返回响应数据；如果状态码为401，则说明用户未登录或登录已失效，需要跳转到登录页面；如果状态码为其他，则抛出错误信息。

4. 使用封装的axios实例

在Vue组件中，我们可以通过引入封装的axios实例来进行网络请求。下面是一个获取用户信息的示例：

import axios from '@/api/axios'

export default {
  data() {
    return {
      userInfo: {}
    }
  },

  created() {
    this.getUserInfo()
  },

  methods: {
    async getUserInfo() {
      try {
        const response = await axios.get('/user/info')
        this.userInfo = response.data
      } catch(err) {
        console.error(err)
      }
    }
  }
}

在上面的代码中，我们通过引入封装的axios实例来进行网络请求。在获取用户信息的方法中调用了axios.get('/user/info')方法来发送 GET 请求获取用户信息，并通过async和await来处理异步请求的返回数据。如果请求成功，则将返回的数据赋值给组件的userInfo属性。

这样，我们就完成了对axios的封装。通过封装，使得我们的代码更加清晰、易于维护，且请求数据时能够按照一定规则进行处理，提高了代码复用性和可读性。