ES56对异步事件的处理方式

Posted wangchengb

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES56对异步事件的处理方式相关的知识,希望对你有一定的参考价值。

//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)
}

 

以上是关于ES56对异步事件的处理方式的主要内容,如果未能解决你的问题,请参考以下文章

如何优雅的处理Nodejs中的异步回调

ES7-Es8 js代码片段

前端异步流程工具

《深入理解ES6》笔记—— Promise与异步编程

使用ES6 +Promise组织异步代码

ES6 Promise