Vue二次封装axios流程详解

在Vue项目中，我们通常会使用axios进行网络请求。为了提高开发效率和代码复用性，我们可以对axios进行二次封装，使其更贴合项目需求。下面将详细讲解Vue二次封装axios的流程。

步骤一：创建axios实例

我们先在一个标准的Vue项目中安装axios库，然后在src目录下新建utils文件夹，用于存放我们的axios实例封装及其他工具函数。在该文件夹下新建request.js文件，用于创建axios实例。示例代码如下：

import axios from 'axios'

const baseURL = '/api'

const instance = axios.create({
  baseURL,
  timeout: 10000
})

export default instance

上面代码中，我们创建了一个名为instance的axios实例，同时设置了请求的baseURL（将所有请求的URL前缀都设置成/api），以及请求的超时时间timeout设为10秒。

步骤二：封装请求方法

在前面创建的axios实例下，我们需要把常用的请求方法封装起来，方便调用和管理。通常会包括get、post、put、delete等RESTful风格的常用方法。同时，我们也可以设置拦截器，对请求和响应进行处理，包括请求头添加、响应数据预处理、错误处理等。示例代码如下：

import instance from './request'
import { Message } from 'element-ui'

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

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

export default {
  get (url, params) {
    return instance.get(url, {
      params
    })
  },
  post (url, data) {
    return instance.post(url, data)
  },
  put (url, data) {
    return instance.put(url, data)
  },
  delete (url, data) {
    return instance.delete(url, {
      data
    })
  }
}

上面代码中，我们利用axios提供的拦截器功能，对请求和响应进行处理。在请求拦截器中，我们添加了Authorization请求头，从localStorage中获取token。在响应拦截器中，我们对成功和失败的请求做了不同的处理，对响应数据进行预处理，并统一处理了错误信息。

步骤三：引入请求方法

通过步骤二的封装，我们现在就已经可以在项目中使用二次封装的axios请求方法了。我们只需要在需要使用axios的地方引入封装好的请求方法即可。示例代码如下：

import request from '@/utils/request'

export function getUserInfo () {
  return request.get('/user/info')
}

export function login (username, password) {
  return request.post('/login', { username, password })
}

上面代码中，我们在请求用户信息和登录接口的位置引入二次封装的axios请求方法，分别使用get和post方法进行请求。这样做的好处是，在获取用户信息和登录接口等地方引入二次封装的请求方法，可以有效地复用代码，降低维护成本。

示例一：请求头中添加token

在步骤二的代码实现中，我们在请求拦截器中添加了Authorization请求头，从localStorage中获取了token。在下面的示例中，我们演示了如何在发送请求时，自动在请求头中带上token。

import axios from 'axios'

const baseURL = '/api'

const instance = axios.create({
  baseURL,
  timeout: 10000
})

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

async function getUserInfo () {
  try {
    const res = await instance.get('/user/info')
    console.log(res)
  } catch (e) {
    console.error(e)
  }
}

getUserInfo()

上面代码中，我们在getUserInfo函数中使用了二次封装的axios请求方法，由于我们在请求拦截器中添加了Authorization请求头，因此该请求头会自动附在请求headers中。

示例二：预处理响应数据

在步骤二的代码实现中，我们在响应拦截器中对响应数据进行了预处理，并处理了错误信息。在下面的示例中，我们演示了如何在发送请求后，直接获取到处理过的响应信息。

import request from '@/utils/request'

async function getUserInfo () {
  try {
    const res = await request.get('/user/info')
    console.log(res)
  } catch (e) {
    console.error(e)
  }
}

getUserInfo()

上面代码中，我们使用了步骤三中的getUserInfo函数，该函数中调用了getUserInfo请求方法，并处理了请求成功和请求失败的情况。这样，在使用的时候我们无需再次去处理请求的结果和错误信息，直接用try...catch语句即可获取到处理过的响应信息。