关于vue开发中关于axios的封装过程，以下是完整攻略：

1.为什么要进行axios的封装

vue中使用axios进行网络请求是很方便的，但是我们可能需要定制自己的请求拦截/响应拦截器、设置默认请求头等等，这时候就需要进行axios的封装，便于在多个组件中复用。

2.封装axios的步骤

2.1 安装axios依赖

首先我们需要在项目中安装axios依赖，使用命令：

npm install axios

2.2 创建api目录，用于存放封装的axios请求方法

在src目录下创建api目录（也可以根据个人喜好定制目录结构），用于存放封装的ajax请求方法。在api目录下创建index.js，用于定义所有请求的方法，代码示例：

import axios from 'axios'
import { Message } from 'element-ui' // 引入饿了么UI的消息提示

// 创建axios实例
const instance = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // API的基础路径
  timeout: 5000 // 超时时间
})

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

// 配置响应拦截器
instance.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    return response.data
  },
  error => {
    // 对响应错误做些什么
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

// 封装get请求
export function get(url, params) {
  return instance.get(url, {
    params
  })
}

// 封装post请求
export function post(url, data) {
  return instance.post(url, data)
}

在此示例中，我们创建了一个instance实例，用于进行axios操作，同时配置了请求拦截器和响应拦截器。实现了get与post请求的封装，并将其导出模块。

通过配置请求拦截器，我们可以在发送请求前进行一些处理，比如添加请求头、请求参数统一处理等等。

通过配置响应拦截器，我们可以对响应结果进行一些处理，比如统一处理错误信息、处理业务状态码等等。

2.3 在组件中引入要用到的请求方法

在组件中引入刚才定义的请求方法，即可进行网络请求。例如：

import { get, post } from '@/api'

// 调用get请求方法
get('/api/user/123', { name: '张三' })
  .then(res => {
    console.log(res)
  })

// 调用post请求方法
post('/api/user', { name: '李四', age: 18 })
  .then(res => {
    console.log(res)
  })

3.示例

下面是在vue开发中关于axios的封装过程的示例说明。

3.1 示例一

// api/index.js

import axios from 'axios'
import { Message } from 'element-ui'

const instance = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

instance.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token')
    if (token) {
      config.headers.Authorization = token
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

instance.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export function get(url, params) {
  return instance.get(url, {
    params
  })
}

export function post(url, data) {
  return instance.post(url, data)
}

点击查看完整的示例代码：https://github.com/PanJiaChen/vue-element-admin/blob/master/src/api/index.js

3.2 示例二

// api/index.js

import axios from 'axios'
import { Message } from 'element-ui'

const instance = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

instance.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token')
    if (token) {
      config.headers.Authorization = token
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

instance.interceptors.response.use(
  response => {
    if (response.data.code !== 200) {
      Message({
        message: response.data.message,
        type: 'error',
        duration: 5 * 1000
      })
      return Promise.reject(response.data.message)
    }
    return response.data
  },
  error => {
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export function get(url, params) {
  return instance.get(url, {
    params
  })
}

export function post(url, data) {
  return instance.post(url, data)
}

在上面的示例中，在响应拦截器中判断业务状态码，如果不为200，则弹出错误提示。这样，在多个组件中，就不用重复地进行响应状态的校验。