axios是前后端数据交互的重要桥梁，理论和概念这里不再叙述了。可以看看官网。

axios中文文档|axios中文网 | axios

本例子，从简单到难。

目录

一、简单的使用

二、查询数据时出现等待窗体

一、简单的使用

1.废话少说，先使用HBuilder X建立一个能运行的项目

2.安装axios

使用如下命令安装

npm install axios

安装成功后

3. 建立文件夹和文件，如图所示

4.demoAxios.js中的代码，其他的选项可以自己增加

import axios from 'axios'//export将service传出去export const service = axios.create({baseURL: 'https://localhost:5001/api'//baseURL: import.meta.env.VITE_BASE_URL, //这里也可以使用变量//timeout: 30000,//超时设置//withCredentials: true, //异步请求携带cookie//headers: {// //设置后端需要的传参类型// 'Content-Type': 'application/json;charset=UTF-8;',// //'token': 'your token',// 'X-Requested-With': 'XMLHttpRequest'// }})

5.使用

在vue界面中，先导入，然后直接写api地址，其中api已经写好了。

HelloWorld.vue代码，其中没用的代码已经删除了

import {ref,onMounted} from 'vue'import {service} from "/store/demoAxios.js"let user = ref("admin")let passWord = ref("123456")const Login = async () => {await service.get(`User/Login" />
 
至此，简单的使用就完成了。
 
二、查询数据时出现等待窗体
 
1.封装的时候，只需要更改demoAxios.js文件即可。
 
并且使用了element-plus，所以要先进行安装element-plus，安装步骤不再叙述了。
 
安装完成后，直接导入，然后调用。
 
注释已经写的很清晰了，可以看注释
 
demoAxios.js代码
 
import axios from 'axios'import {ElLoading} from 'element-plus'//export将service传出去export const service = axios.create({baseURL: 'https://localhost:5001/api'//baseURL: import.meta.env.VITE_BASE_URL, //这里也可以使用变量//timeout: 30000,//超时设置//withCredentials: true, //异步请求携带cookie//headers: {// //设置后端需要的传参类型// 'Content-Type': 'application/json;charset=UTF-8;',// //'token': 'your token',// 'X-Requested-With': 'XMLHttpRequest'// }})//下面有2种写法，一种是声明函数的写法，一种是箭头函数的写法，都可以//request interceptor  请求拦截器service.interceptors.request.use(function(config) {// 在发送请求之前做些什么console.log(config)console.log('这里是请求前')//这里是使用了element-plus，进行模态化窗体，也就是等待查询的意思，本案例在api中，设置了等待时间ElLoading.service({lock: true,text: 'Loading...',background: 'rgba(0, 0, 0, 0.7)', //灰色，删除就是白色的})return config},function(error) {// 对请求错误做些什么console.log(error)console.log('这里是请求错误')return Promise.reject(error)})//响应拦截器service.interceptors.response.use(res => {// 在请求成功后的数据处理if (res.status === 200) {console.log(res.status)console.log('这里是请求成功后')//查询成功，关闭模态化窗体ElLoading.service().close()return res;} else {console.log(res.status)console.log('这里是请求失败后')ElLoading.service().close()return res;}},err => {// 在响应错误的时候的逻辑处理console.log('这里是响应错误')return Promise.reject(err)});
2.效果