3回答

孺子牛丶

2019-11-07

        function loadImage(src) {
            const promise = new Promise((resolve, reject) => {
                var img = document.createElement('img')
                img.onload = () => {
                    console.log(src)  // 即使调整then的顺序，src1 始终先于src2打印
                    resolve(img)
                }
                img.onerror = () => {
                    reject()
                }
                img.src = src
            })
            return promise
        }
        
        var src1 = "https://www.baidu.com/img/baidu_jgylogo3.gif"
        var src2 = "https://www.bootcdn.cn/assets/img/jquery.svg?1572725978491"

        // var result1 = loadImage(src1)
        // var result2 = loadImage(src2)

        // // 在当前示例下：其实不管result1.then 在前还是result2.then在前，
        // // 真正加载的顺序其实是由前面调用loadImage方法的顺序决定的
        // // 即：result1始终先于result2加载
        // result2.then((img2)=>{
        //     console.log('img2加载完成', img2.width)
        //     return result1
        // }).then((img1) => {
        //     console.log('img1加载完成', img1.width)
        // }).catch(ex => {
        //     console.log(ex)
        // })

        // // 若想体现promise串联可以这样写：
        // 测试一：img1 先 img2 后
        // loadImage(src1).then((img1)=>{
        //     console.log('img1加载完成', img1.width)
        //     return loadImage(src2)
        // }).then((img2)=>{
        //     console.log(img2加载完成, img2.width)
        // }).catch(ex => {
        //     console.log(ex)
        // })

        // 测试二：img2 先 img1 后
        loadImage(src2).then((img2)=>{
            console.log('img2加载完成', img2.width)
            return loadImage(src1)
        }).then((img1)=>{
            console.log('img1加载完成', img1.width)
        }).catch(ex => {
            console.log(ex)
        })

0

0

孺子牛丶

2019-11-07

我觉的你说的挺有道理的，但是就当前这个例子而言，其实两者没什么区别。

因为前面var result1 = loadImage(src1) 这句在 var result2 = loadImage(src2)之前，这两句已经按顺序已经执行了（即图片1先于图片2加载），后面then的时候确实只是输出结果而已。

0

0

双越

2019-03-28

是的，第一个函数要有 return 才行。这一点，我之前提交了一个问题，说明了。

0

0