ES6之Promise对象

最新推荐文章于 2024-05-24 18:15:02 发布

置顶 singsingasong

最新推荐文章于 2024-05-24 18:15:02 发布

阅读量422

点赞数

CC 4.0 BY-SA版权

分类专栏： ES6 JavaScript 文章标签： promise 异步 es6 race all

本文链接：https://blog.youkuaiyun.com/singsingasong/article/details/78205689

JavaScript 同时被 2 个专栏收录

29 篇文章

订阅专栏

ES6

13 篇文章

订阅专栏

本文介绍了如何使用ES6的Promise替代传统异步方法，并通过具体案例展示了Promise的基本用法、Promise.all和Promise.race的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

异步

即：先A后B
传统方法：1.回调 2.事件触发

传统方法

let ajax = function(callback){
    setTimeout(function() {
        callback&&callback.call();
    }, 500);
}
ajax(function(){
    console.log('hello')
})

同样的案例用promise怎么写呢？

let ajax = function(){
   console.log('执行2');
    // 返回一个对象，这个对象就是一个promise实例
    return new Promise(function(resolve,reject){  
        setTimeout(function(){
            resolve();
        },1000)
    })
}
//ajax运行后返回一个promise实例，具有.then方法,表示执行下一步。then的函数体就是下一步
ajax().then(function(){
    console.log('promise','timeout2');
})

Promise的作用

　　相比较而言，结果上一模一样。但是ES6具有更好的可读性、可维护性。

Promise的基本用法

Promise.all

把多个Promise实例当做一个promise实例。
含义：all下面是个数组，数组传递进来多个promise实例。当三张图片所有的状态都发生变化时，才会触发promise.all这个新的promise对象。

function loadImg(src){
        return new Promise((resolve,reject)=>{
            let img = document.createElement("img");
            img.src = src;
            img.onload = function(){
                resolve(img);
            }
            img.onerror = function(err){
                reject(err);
            }
        })
    }

    function showImgs(imgs){
        imgs.forEach(function(img){
            document.body.appendChild(img);
        })
    }

    Promise.all([
        loadImg('http://i4.buimg.com/567571/df1ef0720bea6832.png'),
        loadImg('http://i4.buimg.com/567571/2b07ee25b08930ba.png'),
        loadImg('http://i2.muimg.com/567571/5eb8190d6b2a1c9c.png')
    ]).then(showImgs)

执行结果：

这里写图片描述

如果有一个图片正在加载中，这三个图片就都不会显示！

Promise.race

有一个实例的状态改变，就触发promise.race新对象，其他实例不再执行

// 有一个图片加载完就添加到页面
    function loadImg(src){
        return new Promise((resolve,reject)=>{
            let img = document.createElement("img");
            img.src = src;
            img.onload = function(){
                resolve(img);
            }
            img.onerror = function(err){
                reject(err);
            }
        })
    }

    function showImgs(img){
        let p = document.createElement('p');
        p.appendChild(img);
        document.body.appendChild(p);
    }

    Promise.race([
        loadImg('http://i4.buimg.com/567571/df1ef0720bea6832.png'),
        loadImg('http://i4.buimg.com/567571/2b07ee25b08930ba.png'),
        loadImg('http://i2.muimg.com/567571/5eb8190d6b2a1c9c.png')
    ]).then(showImgs)