devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vite + Vue3 + TS 封装axios + 封装loading + 封装返回顶部_vite axios

作者：小丑西瓜9 | 2024-03-13 03:49:01

赞

踩

vite axios

前言

9a69fede8b2044a79dd834e3e48f20b4.png​前期回顾    ​      

vite + vue3 + ts配置《企业级项目》二次封装el-table、分页_0.活在风浪里的博客-CSDN博客封装的功能有哪些？分页、表格排序、文字居中、溢出隐藏、操作列、开关、宽、最小宽、type类型（selection/index/expand）、格式化 、不同页面不同操作列、vuex、vue持久化插件、（此处没有接口所以用到，还涉及了query与params传值区别）子组件说思路：data数据请求接口拿到，表头数据一般也是后台接口，如没，前台可自定义自己写......https://blog.csdn.net/m0_57904695/article/details/125613767?spm=1001.2014.3001.5501

目录

前言

 我要实现什么效果？

代码简单吗？

念及此

一、封装axiso前先配置环境变量

第一步： 配置环境变量

第二步：封装axios

二：封装loading

​

loading.vue 

index.ts

 在main.ts引入index.ts

 三：封装返回顶部

 MyBackTop.vue

index.ts

在main.ts引入index.ts

结语 

 我要实现什么效果？

  • 全局封装一次！

  • 项目中切换路由显示loading，

  • 发起axios显示loading,

  • 每个页面显示返回顶部

6f5f6aec73884e139205c347ab240f3b.gif  

代码简单吗？

  • 极简

念及此

  • 正文开始

一、封装axiso前先配置环境变量

  • 因为真实项目中需要不同环境测试的

第一步： 配置环境变量

如果根据租户id，一个项目适应不同客户需要更多的环境变量

 在根目录新建三个文件

.env.development

 NODE_ENV='development'

 .env.production

  NODE_ENV='production'

.env.staging

NODE_ENV='production'

 d7884ba0bbf84bdd8369ccbc633088a7.png

 完成！

第二步：封装axios

在src下新建newwork文件夹 并在里面新建4个文件

解释： 

  •  index.ts 封装的是api接口，在项目中大量用到接口不能分散写在各处、不易维护
  • service.ts 创建axiso实例写入请求拦截响应拦截
  • requestMethod 封装的是请求方法，在项目中大量用到接口，所以将请求方法也封装

正文： 

一 ：配置跨域

0a23c4cd28354120b3cdbf3bc3e1b550.png

二： 网址配好后写 service.ts 创建axiso实例

  1. import axios, {
  2. 	AxiosInstance,
  3. 	AxiosRequestConfig,
  4. 	CancelTokenSource,
  5. } from 'axios';
  6. // 导入 element-plus 中的消息和弹框组件
  7. import { ElMessage, ElMessageBox } from 'element-plus';
  8. import { Session } from '/@/utils/storage';
  9.  
  10. // 取消请求的标记
  11. let cancelToken: CancelTokenSource | null = null;
  12.  
  13. // 创建 Axios 实例
  14. const service: AxiosInstance = axios.create({
  15. 	baseURL: import.meta.env.VITE_API_URL, // 设置基础 URL
  16. 	timeout: 1000, // 设置超时时间
  17. 	headers: { 'Content-Type': 'application/json' }, // 设置请求头
  18. });
  19.  
  20. // 请求拦截器
  21. service.interceptors.request.use(
  22. 	(config: AxiosRequestConfig) => {
  23. 		// 在发送请求之前做些什么？
  24. 		const token = Session.get('token');
  25. 		if (token) config.headers!['token'] = token; // 在请求头中添加 token
  26.  
  27. 		// 如果存在上一次的请求，则取消它
  28. 		if (cancelToken) cancelToken.cancel('取消请求');
  29. 		// 如果存在上一次的请求，则取消它
  30. 		cancelToken = axios.CancelToken.source();
  31. 		config.cancelToken = cancelToken.token; // 设置取消请求的 token
  32.  
  33. 		return config;
  34. 	},
  35. 	(error) => {
  36. 		// 对请求错误做些什么？
  37. 		return Promise.reject(error);
  38. 	}
  39. );
  40.  
  41. // 响应拦截器
  42. service.interceptors.response.use(
  43. 	(response) => {
  44. 		// 对响应成功数据做点什么？
  45. 		const res = response.data;
  46. 		if (res.code && res.code !== 200) {
  47. 			// 处理一些常见的错误情况
  48. 			if (res.code === 401 || res.code === 4001) {
  49. 				// 退出登录并跳转到登录页
  50. 				Session.clear();
  51. 				window.location.href = '/home';
  52. 				ElMessageBox.alert('你已被登出，请重新登录', '提示', {})
  53. 					.then(() => {})
  54. 					.catch(() => {});
  55. 			}
  56. 			return Promise.reject(response);
  57. 		} else {
  58. 			return response.data;
  59. 		}
  60. 	},
  61. 	(error) => {
  62. 		// 对响应错误数据做点什么？
  63. 		console.log('！这里输出 声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。