如何用vue封装axios请求

当我们使用Vue框架进行前端开发时，经常需要通过发送HTTP请求来与后台进行交互。其中，axios是一个很流行的HTTP请求工具库，它提供了简单易用、强大的API，并且可以拦截请求、响应。本文将详细讲解如何用Vue封装axios请求，并提供两个例子供参考。

安装axios和Vue-axios

使用npm或者yarn安装axios和Vue-axios:

npm install axios vue-axios --save

或者

yarn add axios vue-axios

创建axios实例

在src目录下，新建一个utils文件夹，在文件夹内创建一个axios.js文件，这个文件中我们创建axios实例并进行一些配置，比如设置API前缀、拦截请求等。

import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://api.example.com', // 设置api前缀
  timeout: 10000, // 超时时间
  headers: { 'Content-Type': 'application/json;charset=UTF-8' } // 请求头
})

// 拦截请求
instance.interceptors.request.use(config => {
  // do something
  return config
}, error => {
  // do something
  return Promise.reject(error)
})

// 拦截响应
instance.interceptors.response.use(response => {
  // do something
  return response
}, error => {
  // do something
  return Promise.reject(error)
})

export default instance

在Vue中使用

在Vue项目中的main.js文件中，引入axios和Vue-axios，并将其挂载到Vue原型上，使其在每一个实例中可用。

import Vue from 'vue'
import App from './App.vue'
import axios from './utils/axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

new Vue({
  render: h => h(App),
}).$mount('#app')

现在，在Vue组件中，就可以像下面这样使用axios了。

export default {
  data () {
    return { 
      users: [] 
    }
  },
  mounted () {
    this.$axios.get('users')
      .then(response => {
        console.log(response.data)
        this.users = response.data
      })
      .catch(error => console.log(error))
  }
}

示例1：发送带有token的请求

对于需要完成用户验证后才能访问的接口，我们需要在请求头中添加token。这里提供一个例子，展示如何在我们封装的axios中实现添加token。

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

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

示例2：上传文件

当我们需要上传文件时，可以使用axios的FormData对象。下面提供一个例子，演示如何在我们封装的axios中使用FormData上传文件。

const handleUpload = async (file) => {
  const formData = new FormData()
  formData.append('file', file) // 将需要上传的文件放到FormData中
  try {
    const response = await this.$axios.post('/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data' // 告诉后台上传的是文件
      }
    })
    console.log(response.data)
  } catch (error) {
    console.log(error)
  }
}

以上就是使用Vue封装axios请求的攻略，通过封装实例可以提高开发效率，更好的管理请求，提高代码的可读性和可维护性。