Vue async+await实现同步执行

 今天在测试微信扫一扫的时候，发现了一个很奇怪的问题。点击扫一扫的时候第一次总是打不开，再点一次就正常了。

后来仔细看代码才发现：获取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');
            });
        }