在uni-app中,关于axios封装uni.showModal模态弹窗重复出现的问题

封装axios的时候,相信大家都会遇到错误码401的token失效或token没有,提示用户重新登录的问题,但有时后但我们根据提示弹窗前往提示登录页面的时候,我们会发现但我们登录完成返回原本的页面时,提示弹窗还在的情况,原因在于我们我们多次调用了报错需要显现弹窗提示的接口,

解决方法:

对需要进行显示弹窗的axios封装内容进行节流操作

let jsq = null;//放在方法外部

//方法内部
clearTimeout(jsq);//运行方法先清除延时器
jsq = setTimeout(() => {
	if (token) {
        //token过期
		// 请空用户数据
		removeToken();
		removeTokenType();
		// 弹出登录页面
		uni.showModal({
			title: "提示",
			content: "登录状态失效,请重新登录",
			success: function (res) {
				if (res.confirm) {
					loginApi.mpWeixinLogins();
				} else if (res.cancel) {
					console.log("用户点击取消");
				}
			},
		});
	} else {
        //未登录
		uni.showModal({
			title: "提示",
			content: "请登录",
			success: function (res) {
				if (res.confirm) {
					loginApi.mpWeixinLogins();
				} else if (res.cancel) {
					console.log("用户点击取消");
				}
			},
		});
	}
	jsq = null;
}, 1000);



               

  • 4
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要在uni-app引入axios,你可以按照以下步骤进行操作: 1. 首先,你需要在uni-app项目的根目录下安装axios。打开命令行工具,进入到你的uni-app项目根目录,并执行以下命令安装axios: ``` npm install axios ``` 2. 安装完成后,在uni-app的项目目录,找到`/src`文件夹。在该文件夹下创建一个新的文件夹,例如`/utils`,用于存放自定义的工具文件。 3. 在`/utils`文件夹创建一个新的文件,例如`http.js`。在该文件引入axios,并进行相关配置。示例如下: ```javascript import axios from 'axios'; // 创建一个axios实例 const instance = axios.create({ baseURL: 'http://api.example.com', // 设置接口请求的基础URL timeout: 5000, // 设置请求超时时间 }); // 请求拦截器 instance.interceptors.request.use( (config) => { // 在发送请求之前做一些处理,例如添加请求头等 return config; }, (error) => { // 请求错误处理 return Promise.reject(error); } ); // 响应拦截器 instance.interceptors.response.use( (response) => { // 对响应数据进行处理 return response.data; }, (error) => { // 响应错误处理 return Promise.reject(error); } ); export default instance; ``` 4. 在需要发送请求的地方,引入`http.js`文件,并使用axios发送请求。例如,在某个页面的方法发送GET请求: ```javascript import http from '@/utils/http.js'; // 发送GET请求示例 http.get('/api/some-data') .then((response) => { // 处理返回的数据 console.log(response); }) .catch((error) => { // 处理请求错误 console.error(error); }); ``` 这样,你就成功地在uni-app引入了axios,并可以使用它来发送网络请求了。记得根据实际情况修改基础URL和请求路径,以及添加其他需要的配置。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

夏梦春蝉

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

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

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

打赏作者

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

抵扣说明:

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

余额充值