vue axios二次封装的详细解析

“vue axios二次封装的详细解析”是指在Vue项目中使用Axios发送网络请求时，对Axios进行二次封装，简化网络请求的操作流程和参数设置，提高代码的复用性和可维护性。以下是实现“vue axios二次封装”的详细攻略：

一、创建API模块

在Vue项目中创建一个新的模块来封装Axios，例如api.js文件。在该文件中，引入Axios，并封装HTTP请求方法，如get、post、put、delete等，以及设置请求头、超时时间等。示例代码如下：

// api.js
import axios from 'axios'

// 设置默认请求头
axios.defaults.headers.common['Authorization'] = 'AUTH_TOKEN'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

// 创建Axios实例
const instance = axios.create({
  baseURL: '/api',
  timeout: 10000,
  withCredentials: true
})

// 封装HTTP请求方法
export const get = (url, params) => {
  return instance.get(url, { params })
}

export const post = (url, data) => {
  return instance.post(url, data)
}

export const put = (url, data) => {
  return instance.put(url, data)
}

export const del = (url) => {
  return instance.delete(url)
}

二、使用API模块

在Vue组件中使用api.js中封装的HTTP请求方法。例如，在Vue组件中使用get方法获取数据并将数据渲染到页面上，示例代码如下：

<template>
  <div>{{ message }}</div>
</template>

<script>
import { get } from '@/api'

export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    get('/message').then(response => {
      this.message = response.data
    }).catch(error => {
      console.log(error)
    })
  }
}
</script>

在上述代码中，我们首先引入了get方法，然后在mounted钩子函数中调用get方法发送GET请求，并将请求返回的数据赋值给message数据项，最后将message数据渲染到组件模板中。

三、设置拦截器

通过设置拦截器，可以对Axios的请求和响应进行统一的处理。例如在请求头中添加token，以及统一处理错误信息等。示例代码如下：

// api.js
import axios from 'axios'

// 创建Axios实例
const instance = axios.create({
  baseURL: '/api',
  timeout: 10000,
  withCredentials: true
})

// 添加请求拦截器
instance.interceptors.request.use(config => {
  // 在请求头中添加token
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, error => {
  return Promise.reject(error)
})

// 添加响应拦截器
instance.interceptors.response.use(response => {
  // 统一处理响应错误信息
  if (response.data.status === 'error') {
    console.log(response.data.message)
  }
  return response
}, error => {
  return Promise.reject(error)
})

// 封装HTTP请求方法
export const get = (url, params) => {
  return instance.get(url, { params })
}

export const post = (url, data) => {
  return instance.post(url, data)
}

export const put = (url, data) => {
  return instance.put(url, data)
}

export const del = (url) => {
  return instance.delete(url)
}

在上述代码中，我们通过instance.interceptors.request.use方法添加了请求拦截器，在请求头中添加token。另外，我们还通过instance.interceptors.response.use方法添加了响应拦截器，在响应结果中统一处理错误信息。

以上是“vue axios二次封装”的详细攻略，希望对您有所帮助！