ES56对异步事件的处理方式

Posted 2021-12-01 wangchengb

//ES5语法，处理异步事件
{
    let ajax = function(callback) {
        console.log("开始执行ajax函数");
        setTimeout(function(){
            callback&&callback.call()
        },1000);
    };
    ajax(function(){
        console.log("执行ajax函数的回调函数");
    })
}


//ES6语法，Promise处理异步事件
{
    /*
     * 返回一个Promise实例
     * 参数：
     *        resolve     执行下一步操作
     *        reject         终止当前操作
     *
     * 方法：
     *         then()         回调函数，包含两个function,分别对应resolve、reject
     */
    let ajax = function(){
        console.log("开始执行ajax函数");
        return new Promise(function(resolve,reject){
            setTimeout(function(){
                resolve();
            },1000);
        })
    }
    ajax().then(function(){
        console.log("执行ajax函数的resolve()函数");
    },function(){
        console.log("执行ajax函数的reject()函数");
    });
}

//ES6语法，Promise处理串联异步事件
{
    let ajax = function(){
        console.log("第一步：开始执行ajax函数");
        return new Promise(function(resolve,reject){
            setTimeout(function(){
                resolve();
            },1000);
        })
    }
    ajax()
        .then(function(){
        console.log("第二步：执行ajax函数的resolve()函数");
        return new Promise(function(resolve,reject){
            setTimeout(function(){
                resolve();
            },1000);
        })
    })
        .then(function(){
        console.log("第三步：执行ajax函数的resolve()函数");
        return new Promise(function(resolve,reject){
            setTimeout(function(){
                resolve();
            },1000);
        })
    })
        .then(function(){
            console.log("第四步：执行ajax函数的resolve()函数");
        })
}

//ES6语法，Promise处理串联异步事件过程中的异常处理
{
    let ajax=function(num){
        console.log("始执行ajax函数");
        return new Promise(function(resolve,reject){
            if (num>5) {
                resolve(num);
            } else{
                throw new Error("出错了");
            }
        })
    }

    ajax(6)
        .then(function(num){
            console.log("参数：",num);
        }).catch(function(err){
            console.log("捕获错误：",err);
        })
}

//ES6语法，Promise高级用法
/**
 * 场景：feed流格式，加载3张图片(即3张图片加载完，再加载图片)
 */
{
    // 加载图片
    loadImg((src)=>{
        return new Promise((resolve,reject)=>{
            let img = document.createElement("img");
            img.src=src;
            img.onload(()=>{
                resolve(img);
            })
            img.onerror((err)=>{
                reject(err);
            })
        })
    })

    // 将图片显示到页面上
    showImgs((imgs)=>{
        imgs.forEach(function(img) {
            document.body.appendChild(img);
        });
    })

    // 把多个Promise实例，当成一个Promise实例
    Promise.all([
        loadImg(‘http://i4.buimg.com/567571/df1ef0720bea6832.png‘)
    ]).then(showImgs)
}