vite2 + Vue3中axios的封装,代理

开始之前先说一下,

process这个东西是nodejs中内置的,而且不需要require引入,vue2中我们可以通过process.env.NODE_ENV 来判断当前环境、通过process.env.VUE_APP_<自定义名称>,来获取.env、.env.development、.env.production配置文件中的变量(普通.vue文件和vue.config.js文件都可以获取到)。

但是在vite2中移除了process,普通页面或者js文件中可以通过import.meta.env来获取上面配置文件的变量,vite.config.js中 需要 引入 loadEnv 来自于vite,然后通过loadEnv(mode, process.cwd())获取,(参数mode为开放模式或生产模式),下面也会有写到。并且.env这种文件需要VITE_<自定义名称>才行

可以参考 -> vite环境变量和模式

1.安装 axios

npm install axios --save 

2.简单封装axios(在utils下新建request.js) 

request.js


import axios
### 封装 Axios 并集成 Vant 组件库 在构建基于 ViteVue 3 的项目时,为了提高开发效率和代码质量,可以按照如下方式来封装 `Axios` 请求并集成 `Vant` 组件库。 #### 创建请求工具类 创建一个新的文件夹用于存放 HTTP 工具函数,在此示例中命名为 `src/utils/http.ts`: ```typescript // src/utils/http.ts import axios, { AxiosInstance } from &#39;axios&#39;; import { Toast } from &#39;vant&#39;; const service: AxiosInstance = axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 5000 }); service.interceptors.request.use( config => { const token = localStorage.getItem(&#39;token&#39;); if (token) { config.headers[&#39;Authorization&#39;] = `Bearer ${token}`; } return config; }, error => Promise.reject(error) ); service.interceptors.response.use( response => response.data, error => { let message = &#39;&#39;; switch (error.response.status) { case 401: message = &#39;未授权,请登录&#39;; break; case 403: message = &#39;拒绝访问&#39;; break; case 404: message = &#39;请求地址错误&#39;; break; case 500: message = &#39;内部服务器错误&#39;; break; default: message = &#39;连接失败&#39;; } Toast.fail(message); return Promise.reject(new Error(message)); } ); export default service; ``` 上述代码定义了一个全局的 Axios 实例,并设置了默认的基础 URL 和超时时长。通过拦截器机制处理每次发送前后的逻辑操作,比如添加认证头信息或者捕获异常情况下的提示消息[^2]。 #### 定义 API 接口方法 接着可以在同一目录下新建一个名为 `request.ts` 或者其他名称的服务层模块用来声明具体的业务接口调用方法: ```typescript // src/utils/request.ts import http from &#39;./http&#39;; export function login(params: object): Promise<any> { return http.post(&#39;/auth/login&#39;, params); } export function getUserInfo(): Promise<any> { return http.get(&#39;/user/profile&#39;); } ``` 这里展示了两个简单的例子——一个是用户登录功能;另一个是用来获取当前用户的个人信息。实际应用可根据需求扩展更多API接口[^4]。 #### 使用组件库中的加载动画或其他反馈效果 当发起网络请求时可能会有短暂延迟,此时可以通过 `Vant` 提供的一些交互控件给用户提供更好的体验感。例如上面提到过的 `Toast` 插件就可以很好地满足这类场景的需求[^1]。 最后不要忘记安装必要的依赖包以及配置好相应的插件选项以便于正常使用这些第三方资源[^3]: ```bash npm install vant @types/axios --save ``` 并且确保已经在项目的入口处正确引入了所需的样式表和其他初始化设置。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

会说法语的猪

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值