vue3(vite)设置代理封装axios api解耦功能

我来详细讲解一下“vue3(vite)设置代理封装axios api解耦功能”的完整攻略。

一、背景介绍
在使用Vue3(vite)进行前端开发过程中，我们常常需要请求后端提供的API接口。如果每个组件都直接使用axios这个HTTP库去请求API接口的话，会造成以下两个问题：

1. 代码重复，不易维护
2. 无法动态修改后端接口地址

于是，我们需要对axios进行封装，封装出一个API模块，使得每个组件只需调用该API模块，即可完成向后端请求数据的操作。同时，由于后端接口地址可能会发生变化，所以我们需要在封装过程中增加代理设置，方便我们动态修改后端接口地址。

二、封装Axios API
首先安装axios库和vue-router库，然后在src目录下新建一个api目录，在该目录下新建一个index.js文件，此文件用于导出各个API具体内容，同时定义了基础URL和axios对象，接下来我们对其进行封装。

1.引入axios库和vue-router库。

// api/index.js
import axios from 'axios'
import router from '@/router'

2.在axios对象中配置一些全局参数，比如设置超时时间、设置请求拦截器等。

// api/index.js
const instance = axios.create({
    baseURL:  '/api',
    timeout: 5000
});

instance.interceptors.request.use(config => {
    // 在请求发送之前，对config进行一些操作比如设置token之类的
    return config;
}, error => {
    // 请求错误时的操作
    console.error("Req Error:" + error)
    Promise.reject(error);
});

instance.interceptors.response.use(response => {
    // 在响应收到之前，可以对响应结果进行一些操作，比如对后端返回的数据进行格式化等操作
    return response.data
}, error => {
    // 响应错误时的操作
    console.error("Response Error:" + error)
    return Promise.reject(error);
});

3.定义各个API。例如创建用户接口createUser：

// api/index.js
export const createUser = (data) => {
    return instance.post('/users', data)
}

完整代码:

// api/index.js
import axios from 'axios'
import router from '@/router'

const instance = axios.create({
    baseURL:  '/api',
    timeout: 5000
});

instance.interceptors.request.use(config => {
    // 在请求发送之前，对config进行一些操作比如设置token之类的
    return config;
}, error => {
    // 请求错误时的操作
    console.error("Req Error:" + error)
    Promise.reject(error);
});

instance.interceptors.response.use(response => {
    // 在响应收到之前，可以对响应结果进行一些操作，比如对后端返回的数据进行格式化等操作
    return response.data
}, error => {
    // 响应错误时的操作
    console.error("Response Error:" + error)
    return Promise.reject(error);
});

export const createUser = (data) => {
    return instance.post('/users', data)
}

export const getUser = (userId) => {
    return instance.get(`/users/${userId}`)
}

export const updateUser = (userId, data) => {
    return instance.put(`/users/${userId}`, data)
}

export const deleteUser = (userId) => {
    return instance.delete(`/users/${userId}`)
}

三、设置代理
在封装好Axios API后，我们需要设置代理，方便后续修改API请求地址。在vite.config.js文件中，配置如下：

// vite.config.js
export default {
  server: {
    proxy: {
      '/api': {
        // 应对跨域情况
        target: 'http://192.168.1.100:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
}

• /api：表示需要代理的接口路径，这里的/api需要与API模块中设置的baseURL一致。
• target：表示代理的目标地址，即后端API接口地址。
• changeOrigin：表示是否跨域，如果后端请求地址与前端不在一个域名下，则需要开启跨域。
• rewrite：表示重写请求地址，这里默认将API路径中的 '/api' 替换为空。

四、示例说明
我们以获取用户信息为例，介绍如何使用Axios API。首先，在Vue3组件中引入API模块，然后调用getUser()方法，最后对获取到的用户数据进行展示。

<!-- User.vue -->
<template>
  <div>
    <h1>用户信息</h1>
    <p>姓名: {{ user.name }}</p>
    <p>年龄: {{ user.age }}</p>
    <p>性别: {{ user.gender }}</p>
  </div>
</template>

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

export default {
  data () {
    return {
      user: {}
    }
  },
  methods: {
    async fetchUser () {
      const userId = this.$route.params.id
      const user = await getUser(userId)
      this.user = user
    }
  },
  created () {
    this.fetchUser()
  }
}
</script>

这里通过引入API模块，调用getUser()方法获取用户数据，并将获取到的数据赋值给user属性，最后在页面中展示用户数据即可。

对于代理设置，我们可以在 vite.config.js 中修改 target 参数，来动态修改后端API接口地址，从而使其具有更好的可维护性和扩展性。

export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://192.168.1.200:8080', // 修改为另外的地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
};

这样，在切换到新的后端API地址时，我们无需修改各个组件中的API请求路径，只需修改 vite.config.js 中的 target 配置即可。

五、总结
本文对Vue3(vite)中如何封装axios API并设置代理进行了详细的讲解，其中包含了完整的代码示例和代理设置方案。通过这种方式，我们可以优化前端代码结构，提高代码复用性和可维护性，同时也能够方便地切换后端API接口路径，从而保证项目稳定性和扩展性。