ES6 promise 理解

// 现有如下需求 1秒后打印:1s ,再过0.5秒打印:1.5s,再过0.3秒打印1.8s,再过0.1秒打印1.9s。使用ES5写法有回调地狱问题,代码如下,试用ES6新语法优化代码

//ES5 回调地狱
setTimeout(function(){
    console.log('1s');
    setTimeout(function () {
        console.log('1.5s');
        setTimeout(function () {
            console.log('1.8s');
            setTimeout(function () {
                console.log('1.9s');
            },100)
        },300)
    },500);
},1000);


// ES6 使用promise封装timeout写法
function timeout(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(resolve, ms);
    });
}

//[最优写法] 使用 async await 优化
const asyncHandle = async function() {
    await timeout(1000);
    console.log('1s');
    await timeout(500);
    console.log('1.5s');
    await timeout(300);
    console.log('1.8s');
    await timeout(100);
    console.log('1.9s');
};
asyncHandle().then();


//[一般写法]普通输出
timeout(1000).then((value) => {
    console.log('1s');
    timeout(500).then((value) => {
        console.log('1.5s');
        timeout(300).then((value) => {
            console.log('1.8s');
            timeout(100).then((value) => {
                console.log('1.9s');
            });
        });
    });
});

执行结果
这里写图片描述

猜你喜欢

转载自blog.csdn.net/rovast/article/details/79911459
今日推荐