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');
            });
        }