es6 之promise/async/await 异步操作

es6 之promise异步操作

作用:等上一个方法执行完才能执行下一个方法

js:

methods: {
            async tapTab(e) {
                let tabIndex = e.target.dataset.current;
                if (this.tabIndex === tabIndex) {
                    return false;
                } else {
                    let tabBar = await this.getElSize("tab-bar"),
                        tabBarScrollLeft = tabBar.scrollLeft; //点击的时候记录并设置scrollLeft
                    this.scrollLeft = tabBarScrollLeft;
                    this.isClickChange = true;
                    this.tabIndex = tabIndex;
                }
            },

         getElSize(id) { //得到元素的size
                return new Promise((res, rej) => {
                    uni.createSelectorQuery().in(this).select("#" + id).fields({
                        size: true,
                        scrollOffset: true
                    }, (data) => {
                        res(data);
                    }).exec();
                })
            },

}

结论:先执行完含有await这一行才会执行下面的.

例子2:

function sleep3000() {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log('sleep3000 执行完成');
            resolve(new Date());
        }, 3000);
    })
};

function sleep2000() {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log('sleep2000 执行完成');
            resolve(new Date());
        }, 2000);
    })
};
function sleep4000() {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log('sleep4000 执行完成');
            resolve(new Date());
        }, 4000);
    })
};

   async function getDate () {
       let res1 = await sleep3000();
       let res2 = await sleep2000();
       let res3 = await sleep4000();
       console.log('3000：', res1);
       console.log('2000：', res2);
       console.log('4000：', res3);
}

getDate();

打印结果:

Now： 2019-04-08T02:58:23.990Z
sleep3000 执行完成
sleep2000 执行完成
sleep4000 执行完成
3000： 2019-04-08T02:58:26.996Z
2000： 2019-04-08T02:58:29.001Z
4000： 2019-04-08T02:58:33.004Z

 

通过打印时间，可见，每处理完前一个await，才会处理下一个await，上面所有处理完花费了9秒。

所以， 只有当处理后面await需要前一个await返回值时，才可以用以上方法。