Vue async+await实现同步执行
今天在测试微信扫一扫的时候,发现了一个很奇怪的问题。点击扫一扫的时候第一次总是打不开,再点一次就正常了。后来仔细看代码才发现:获取js-sdk验证和打开扫一扫分成了两个方法。首先调用验证方法,然后调用打开扫一扫。但是居然先打印的扫一扫里面的信息。这就很奇怪了。后来查阅资料发现了:js是异步执行的,导致了还没有验证成功,就执行了打开扫一扫功能。要想不改原代码,能治寻找其他的办法了,先执行验...
·
今天在测试微信扫一扫的时候,发现了一个很奇怪的问题。点击扫一扫的时候第一次总是打不开,再点一次就正常了。
后来仔细看代码才发现:获取js-sdk验证和打开扫一扫分成了两个方法。首先调用验证方法,然后调用打开扫一扫。但是居然先打印的扫一扫里面的信息。这就很奇怪了。后来查阅资料发现了:js是异步执行的,导致了还没有验证成功,就执行了打开扫一扫功能。
要想不改原代码,能治寻找其他的办法了,先执行验证方法,再执行扫一扫方法。async+await 可以实现。
由于在saoyisao方法里面调用了JSSDK方法,而JSSDK方法是异步的,所以导致了saoyisao方法整个成了异步的。
解决后的代码如下:
methods: {
JSSDK: function() { //获取微信js-sdk验证,这里需要设置为同步请求,验证成功后才可访问
return new Promise((resolve, reject) => {
let webUrl = location.href.split('#')[0];
let params = {
'webUrl' : webUrl
};
this.$fetch('/WXJSSDK', params).then((data) => {
wx.config({
debug : false,
appId : data.weixin.appId,
timestamp : data.weixin.timestamp,
nonceStr : data.weixin.nonceStr,
signature : data.weixin.signature,
jsApiList : [ 'checkJsApi', 'scanQRCode','getLocation','openLocation' ]
});
this.isLoad = true;
resolve(this);
});
});
},
async saoyisao() { //扫一扫功能
if (!this.isLoad) {
await this.JSSDK();
}
this.$dialog.toast({mes: '正在打开摄像头...', timeout: 1500});
wx.scanQRCode({
desc : 'scanQRCode desc',
needResult : 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
scanType : [ "qrCode", "barCode" ], // 可以指定扫二维码还是一维码,默认二者都有
success : function(res) {// 回调时可以自己处理返回的结果
//console.table(res.needResults);
},
error : function(res) {
if (res.errMsg.indexOf('function_not_exist') > 0) {
this.$dialog.toast({ mes: '版本过低请升级',timeout: 1500,icon: 'error',});
}
},
cancle : function(res) {
this.$dialog.toast({ mes: '已拒绝访问摄像头',timeout: 1500,icon: 'error',});
}
});
}
},
如果写的更规范一点,回调单独处理:
JSSDK: function() { //获取微信js-sdk验证,这里需要设置为同步请求,验证成功后才可访问
return new Promise((resolve, reject) => {
let webUrl = location.href.split('#')[0];
let params = {
'webUrl' : webUrl
};
this.$fetch('/WXJSSDK', params).then((data) => {
resolve(data); // 调用resolve方法时,会调用promise的then回调
});
}).then(data => {
wx.config({
debug : false,
appId : data.weixin.appId,
timestamp : data.weixin.timestamp,
nonceStr : data.weixin.nonceStr,
signature : data.weixin.signature,
jsApiList : [ 'checkJsApi', 'scanQRCode','getLocation','openLocation' ]
});
this.isLoad = true;
}).catch(res => {
console.log('jssdk error');
});
}
更多推荐
已为社区贡献3条内容
所有评论(0)