使用Promise解决回调地狱问题

 let urlBig = "http://static.699pic.com/best_album/57_banner_____.jpg!/fh/410"
        let urlMid = "http://static.699pic.com/best_album/57.jpg"
        let urlSmall = "http://static.699pic.com/best_album/57.jpg!/fw/316"

        //Big=>Mid=>Small
        function loadImage(url) {
            return new Promise(function (resolve, reject) {
                //执行图片加载
                let image = new Image()
                image.src = url

                image.onload = function () {
                    console.log("图片加载成功")
                    resolve({ width: image.width, height: image.height })
                }

                image.onerror = function (event) {
                    console.log("图片加载失败")
                    reject(event)
                }
            })
        }
        //异步操作一
        // loadImage(urlBig).then(function (data) {
        //     console.log("urlBig图片加载完成后=>执行处理")
        //     console.log("返回的数据：", data)
        // })
        // //异步操作二
        // loadImage(urlMid).then(function (data) {
        //     console.log("urlMid图片加载完成后=>执行处理")
        //     console.log("返回的数据：", data)
        // })
        // //异步操作三
        // loadImage(urlSmall).then(function (data) {
        //     console.log("urlSmall图片加载完成后=>执行处理")
        //     console.log("返回的数据：", data)
        // })

        //回调函数嵌套
        // loadImage(urlBig).then(function (data) {
        //     console.log("urlBig图片加载完成后=>执行处理")
        //     console.log("返回的数据：", data)

        //     loadImage(urlMid).then(function (data) {
        //         console.log("urlMid图片加载完成后=>执行处理")
        //         console.log("返回的数据：", data)

        //         loadImage(urlSmall).then(function (data) {
        //             console.log("urlSmall图片加载完成后=>执行处理")
        //             console.log("返回的数据：", data)
        //         })
        //     })
        // })

        //Promise对象 可以将异步操作以同步操作的流程表达出来，避免多层回调函数的嵌套
        //then() 方法返回一个新得Promise对象，因此可以采用链式写法来解决回调地狱问题

        loadImage(urlBig)
            .then(function (data) {
                console.log("urlBig图片加载完成后=>执行处理")
                console.log("返回的数据：", data)
                //返回一个新得Promise对象
                return loadImage(urlMid)
            })
            .then(function (data) {
                console.log("urlMid图片加载完成后=>执行处理")
                console.log("返回的数据：", data)
                //返回一个新得Promise对象
                return loadImage(urlSmall)
            })
            .then(function (data) {
                console.log("urlSmall图片加载完成后=>执行处理")
                console.log("返回的数据：", data)
            }).catch(function (error) {
                console.log("error", error)
            })