这篇文章基于前一个小节的代码基础之上，介绍如何在Vue3项目中引入Axios插件实现网络通信的功能。
1.1、安装依赖
Axios是一款实现网络通信的插件，在前后的分离的项目中，要和后端接口进行数据通信，就可以采用Axios这个插件。首先安装Axios插件所需要的依赖：
# 安装 Axios
yarn add axios
# 安装 Axios
npm install axios
# 安装 Axios
cnpm install axios
执行成功，就可以在package.json文件中，查看到相应的依赖和版本信息。
1.2、新建request.js文件
为了方便使用axios插件，一般在实际开发过程中，都会统一定义一个request.js文件，自定义封装axios请求的工具类。在src目录下，创建一个util目录，在该目录中新建一个request.js文件，代码如下所示：
import axios from 'axios';
import {ElMessage} from 'element-plus';
/**
* 创建 axios 实例对象
* <p>
* 配置请求的根路径，超时时间，请求头等参数
* </p>
*/
const $axios = axios.create({
baseURL: '', // 设置后端接口的服务地址
timeout: 3000, // 设置超时时间
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
});
/**
* 请求拦截器
* <p>
* 每次请求都会执行拦截器，可以在请求头中添加 token 等参数
* </p>
*/
$axios.interceptors.request.use(
config => {
// 可以在这里添加请求头，例如添加 token 等
console.log('请求拦截参数：', config);
return config;
},
error => {
console.log('请求拦截器', error)
return Promise.reject(error);
}
);
/**
* 响应拦截器
* <p>
* 响应拦截器，接口返回数据之后，会执行响应拦截器
* 可以根据接口返回的数据，做相应的处理，例如：成功、失败、未登录、无权限等
* </p>
*/
$axios.interceptors.response.use(
response => {
console.log('响应拦截器', response)
const {code, message} = response.data;
if (code === 200) {
// 成功的处理逻辑
return response.data;
} else if (code === 401) {
// 无权限的处理逻辑
ElMessage.error('您无权进行此操作！');
return Promise.reject(response.data);
} else if (code === 403) {
// 未登录的处理逻辑
ElMessage.error('您尚未登录，请先登录！');
return Promise.reject(response.data);
} else {
// 其他错误的处理逻辑
ElMessage.error(message);
return Promise.reject(response.data);
}
},
error => {
console.log('响应拦截器error:', error)
// 统一的错误提示
if (error === 'Cancel') {
return Promise.reject(error);
}
let {message} = error;
if (message === 'Network Error') {
message = '网络连接异常！';
} else if (message?.includes('timeout')) {
message = '请求超时，请联系管理员！';
} else if (message?.includes('Request failed with status code')) {
message = '未知异常，请联系管理员！';
}
ElMessage.error(message);
// 对响应错误做一些统一的处理
return Promise.reject(error);
}
);
// 导出axios实例对象
export default $axios;
1.3、配置服务代理
前后端分离的模式下，Vue3项目要想访问后端接口，必须配置一下服务代理，这样才可以正确访问到后端接口。打开vite.config.js配置文件，在里面找到server节点，在该节点之后，添加proxy代理配置，如下所示：
server: {
port: 3500,
host: '0.0.0.0',
// 启动服务时自动打开浏览器
open: true,
proxy: {
// 配置代理，针对所有 /api 开头的请求，都将转发到 http://127.0.0.1:8080/api-v2 服务器
'/api': {
// 后端服务地址
target: 'http://127.0.0.1:8080/api-v2',
// 允许跨域，后端也需要同步设置跨域
changeOrigin: true,
// 路径重写，所有以 /api 开头的请求，其中 /api 部分都将被替换为空字符串
// 举个例子：请求 /api/user 将会被代理到 http://127.0.0.1:8080/api-v2/user
rewrite: (path) => path.replace(/^\/api/, '')
}
}
},
完整配置，如下图所示：
添加上面配置之后，针对跨域的问题，还需要后端进行相应的配置。例如：SpringBoot中可以使用CORS跨域配置，只要允许跨域就可以解决前后端跨域无法访问的问题了。
1.4、使用工具类
工具类代码编写完成之后，就可以在需要使用的地方引入这个工具类，但是，实际开发中，一般不会直接使用request.js文件，而是会在src目录下面，创建一个api目录，然后将所有的接口都定义在api目录下面。
例如：我这里在src目录下面创建一个api目录，然后新增一个DemoApi.js文件，并且定义相应的后端接口，如下图所示：
之后就可以在需要调用接口的Vue组件里面，直接引入DemoApi.js文件中对应的接口方法，完成数据的获取了。
<script setup>
import {getData} from "../api/DemoApi.js";
import {onMounted, ref} from "vue";
const data = ref(null);
onMounted(() => {
getData().then(res => {
console.log(res)
data.value = res.data;
}).catch(err => {
console.log(err)
});
});
</script>
<template>
<div>
响应数据：
{{ data }}
</div>
</template>
<style scoped>
</style>
打开浏览器，访问上面组件代码，就可以查看到接口数据了，如下所示：
1.5、获取源代码
源代码地址：
https://gitcode.com/knowledge-base/vue-element-plus-components/tree/vue3-chapter-05
到此，Vue3项目中引入Axios插件实现网络通信就介绍完了。