关于all,race方法的参数和返回值

来源:4-21 promise-all-race

孺子牛丶

2019-11-07

有三个问题,老师有空的时候可以指导一下:
1、all方法中的返回值数组datas,其datas[0],datas[1],这两个返回值是否和promise对象result1和result2对应(即:是否按照all方法的数组参数,顺序输出其值data[i])?

        Promise.all([result1, result2]).then(datas=>{
            console.log(datas[0], 'all')
            console.log(datas[1], 'all')
        })

        Promise.race([result1, result2]).then(data=>{
            console.log(data, 'race')
        })

3、两者写法的区别以及正确性?

    <script>
        function loadImage(src) {
            const promise = new Promise((resolve, reject) => {
                var img = document.createElement('img')
                img.onload = () => {
                    resolve(img)
                }
                img.onerror = () => {
                    reject()
                }
                img.src = src
            })
            return promise
        }
        
        // 引用的图片和视频中的不一样
        var src1 = "https://www.imooc.com/static/img/index/logo.png"
        var src2 = "https://img1.mukewang.com/59672a9f0001bfac06400640-100-100.jpg"

        // // 方式一: 将变量result1 、result2 当做数组元素
        // var result1 = loadImage(src1)
        // var result2 = loadImage(src2)

        // Promise.all([result1, result2]).then(datas=>{
        //     console.log(datas[0], 'all')
        //     console.log(datas[1], 'all')
        // })

        // Promise.race([result1, result2]).then(data=>{
        //     console.log(data, 'race')
        // })
        
        // 方式二: 直接将loadImage方法调用当做数组元素
        Promise.all([loadImage(src1), loadImage(src2)]).then(datas=>{
            console.log(datas[0], 'all')
            console.log(datas[1], 'all')
        })

        Promise.race([loadImage(src1), loadImage(src2)]).then(data=>{
            console.log(data, 'race')
        })
    </script>

3、根据前两种写法,输出结果的不同:方式一race方法输出在前,方式二race方法输出在后了(不明白为什么race方法能在all方法之后输出),这是什么原因?
race在前race在后

写回答

1回答

双越

2019-11-07

第一,all 输出的结果,也输入是一一对应的。

第二,两种写法都没有语法错误,从语法上来讲都对。

第三,两种写法的区别在于:第一种写法初始化了 2 个 promise 实例,而第二种写法初始化了 4 个 promise 实例。你可以就着这个思路,再自己去捋一捋两者的不同。

0
1
孺子牛丶
感谢!感谢!
2019-11-07
共1条回复

前端跳槽必备 一线互联网公司高级前端JavaScript面试

视频讲解前端面试中的JS高级知识点,扩展JS知识深度,从容面试

1621 学习 · 218 问题

查看课程