vue axios 二次封装

Vue 是一个前端框架，而 axios 是一个基于 Promise 的 HTTP 请求库。在 Vue 项目中，我们通常需要使用 axios 来进行接口请求。由于每个项目的接口返回数据结构和请求方式可能不同，因此我们需要对 axios 进行二次封装以方便统一管理。

二次封装可以解决以下问题：
1. 统一处理请求错误，例如网络错误、接口返回的错误码等。
2. 统一处理请求 loading 状态，避免每个请求都需要手动设置 loading 状态。
3. 统一处理请求头和请求参数等信息，避免每个请求都需要手动设置。

以下是一个简单的 vue axios 二次封装的示例：

// api.js
import axios from 'axios'
import { Message } from 'element-ui'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000 // 请求超时时间
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在这里可以统一设置请求头等信息
    return config
  },
  error => {
    // 请求错误时的处理
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data

    // 在这里可以统一处理接口返回的错误码等信息
    if (res.code !== 0) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })

      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    // 响应错误时的处理
    return Promise.reject(error)
  }
)

export default service

上述代码中，我们通过 axios.create 创建了一个 axios 实例，并对其进行了配置。在请求拦截器中，我们可以统一设置请求头等信息。在响应拦截器中，我们可以统一处理接口返回的错误码等信息，并使用 element-ui 中的 Message 组件来显示错误信息。

使用示例：

import request from '@/utils/api'

request({
  url: '/user/info',
  method: 'get',
  params: { id: 123 }
}).then(response => {
  console.log(response)
}).catch(error => {
  console.log(error)
})