资讯专栏INFORMATION COLUMN

【ES6入门12】:Promise

NikoManiac / 2456人阅读

摘要:基本用法是一种异步编程的解决方案的回调结果立马输出,秒之后输出如果过程变得复杂,,用回调来处理会使代码变得复杂代码复杂影响后期维护,很难一眼看出回调之间的顺序问题,代码难以阅读的返回一个对象实例,这个实例具有方法,就是执行下一步的功能表示执

Promise基本用法

Promise是一种异步编程的解决方案

1.es5的回调

{
    let ajax = function (callback) {
        console.log("run1");
        setTimeout(function () {
            callback && callback.call();
        }, 1000);
    };
    ajax(function () {
        console.log("timeout1");
    });
    // 结果:立马输出 run1,1秒之后输出 timeout1
    // 1.如果过程变得复杂,a()=>b()=>c()=>d()... ,用回调来处理会使代码变得复杂
    // 2.代码复杂影响后期维护,很难一眼看出回调之间的顺序问题,代码难以阅读
}

2.es6的Promise

{
    let ajax = function () {
        console.log("run2");
        // 返回一个对象(Promise实例),这个实例具有then()方法,就是执行下一步的功能
        return new Promise(function (resolve, reject) {
            // resolve表示执行下一步操作 reject表示中断当前操作
            setTimeout(function () {
                resolve();
            }, 1000);
        });
    };
    ajax().then(function () {
        // 这个方法对应resolve
        console.log("timeout2");
    }, function () {
        // 这个方法对应reject
    });
    // 结果:立马输出 run2,1秒之后输出 timeout2
    // 结果和es5一样,但是代码可读性、可维护性更高
}

3.then()的串联操作

{
    let ajax = function () {
        console.log("run3");
        return new Promise(function (resolve, reject) {
            setTimeout(function () {
                resolve();
            }, 2000);
        });
    };
    ajax().then(function () {
        // 返回Promise实例,通过不断的下一步下一步,实现了串联操作的结果
        return new Promise(function (resolve, reject) {
            setTimeout(function () {
                resolve();
            }, 3000);
        });
    }).then(function () {
        console.log("timeout3");
    });
    // 结果:立马输出 run3,5秒之后输出 timeout3
}

4.catch方法

{
    let ajax = function (num) {
        console.log("run4");
        return new Promise(function (resolve, reject) {
            if (num >= 5) {
                resolve();
            } else {
                throw Error(`出错了,${num}小于5`);
            }
        });
    };

    // catch方法用来捕获异常
    ajax(6).then(function () {
        console.log(6);
    }).catch(function (err) {
        console.log(err);
    });
    // 结果:输出 run4 6

    ajax(3).then(function () {
        console.log(3);
    }).catch(function (err) {
        console.log(err);
    });
    // 结果:输出 run4  Error: 出错了,3小于5
}
Promise.all()

例子:所有图片加载完再统一添加到页面

{
    function loadImg(src) {
        return new Promise((resolve, reject) => {
            let img = document.createElement("img");
            img.src = src;
            // onload监听图片加载完成
            img.onload = function () {
                resolve(img);
            };
            // onerror监听图片加载失败
            img.onerror = function (err) {
                reject(err);
            };
        });
    }
    function showImgs(imgs) {
        console.log(imgs); // [img, img, img] 三个img对象
        imgs.forEach(function (img) {
            document.body.appendChild(img);
        });
    }
    // Promise.all 把多个Promise实例当做一个Promise实例
    // Promise.all(array).then(fn),array对应多个Promise实例,当所有实例状态发生改变时,新的Promise实例才会跟着发生变化
    // Promise.all也是返回Promise实例,所以也有.then()方法
    // 当三张图片都加载完成,才会执行showImgs,如果其中有图片正在加载,不会执行showImgs,页面上看不到任何一张图片
    Promise.all([
        loadImg("https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2530513100.webp"),
        loadImg("https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2529571873.webp"),
        loadImg("https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2395733377.webp")
    ]).then(showImgs);
}
Promise.race()

例子:有一个图片加载完就添加到页面,其余的不管,只显示最先加载完成的一张图片

{
    function loadImg(src) {
        return new Promise((resolve, reject) => {
            let img = document.createElement("img");
            img.src = src;
            // onload监听图片加载完成
            img.onload = function () {
                resolve(img);
            };
            // onerror监听图片加载失败
            img.onerror = function (err) {
                reject(err);
            };
        });
    }
    function showImgs(img) {
        let p = document.createElement("p");
        p.appendChild(img);
        document.body.appendChild(p);
    }
    // 当某一张图片率先加载完成,执行showImgs显示这张图片,剩余图片不再响应
    Promise.race([
        loadImg("https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2530513100.webp"),
        loadImg("https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2529571873.webp"),
        loadImg("https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2395733377.webp")
    ]).then(showImgs);
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/98763.html

相关文章

  • ES6入门到进阶(二):循环、数组、对象

    摘要:优点按需加载可以写中路径也可以动态加以后默认就是严格模式,默认严格模式完参考视频资料经典入门到进阶 上一篇:ES6入门到进阶(一):let、解构赋值、字符串模板、函数 一、循环 ES5里面新增一些东西 1.1 arr.forEach()(常用) 1. for for(let i=0; i [{t:aaaa}] let arr = [ ...

    JerryZou 评论0 收藏0
  • ES6入门,看这篇就够了

    摘要:从入门到放弃是什么,黑历史,不讲,自己百度去。类你没有看错,这里面的就没有问题的。之前我们用过,和有了,再也不用这两个货了。一个函数,可以遍历状态感觉就是状态机,好吧不说了再说就懵逼了。 ES6从入门到放弃 1.ES6是什么,黑历史,不讲,自己百度去。 2.在浏览器中如何使用? 1.babel babeljs.io在线编译 2.traceur-----Google出的编译器,把E...

    lewinlee 评论0 收藏0
  • 前端面试题总结(js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源)

    摘要:并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快速搭建项目。 本文是关注微信小程序的开发和面试问题,由基础到困难循序渐进,适合面试和开发小程序。并总结vue React html css js 经典面试题 集各种算法和插件、前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快...

    pumpkin9 评论0 收藏0
  • 前端面试题总结(js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源)

    摘要:并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快速搭建项目。 本文是关注微信小程序的开发和面试问题,由基础到困难循序渐进,适合面试和开发小程序。并总结vue React html css js 经典面试题 集各种算法和插件、前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快...

    Carson 评论0 收藏0

发表评论

0条评论

NikoManiac

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<