欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

ES6中Promise的基本用法介绍

程序员文章站 2022-04-27 22:00:58
...
本篇文章给大家带来的内容是关于ES6中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);
}








ican ES6中Promise的基本用法介绍26 发布于 超级有温度的代码

1 天前发布

【ES6入门12】:Promise

  • javascript

  • es6

  • 前端

19 次阅读 · 读完需要 15 分钟



0

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

  • ES6中Promise的基本用法介绍


你可能感兴趣的



评论

默认排序 时间排序



载入中...

显示更多评论


ES6中Promise的基本用法介绍

以上就是ES6中Promise的基本用法介绍的详细内容,更多请关注其它相关文章!