Now I'm not embarrassed to say that I'm the front end if I don't use Promise. Why is Promise so hot? In a word, the most important thing to solve the problem of callback nesting and execution order is to solve the problem of order.

But before we start writing, let's see how promise can solve the problem and use it.
To list a sequence of loading picture demo s:

//Three images img1, img2 and img3 are required to be loaded. The loading order is 1, 2 and 3
        let url1 = "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3293635140,3955114282&fm=26&gp=0.jpg"
        let url2 = "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1019333328,1858047370&fm=26&gp=0.jpg"
        let url3 = "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4226468334,723383513&fm=26&gp=0.jpg"
        let oImg1 = new Image()
        oImg1.onload = function() {
            console.log('img1 Loading completed')
            let oImg2 = new Image()
            oImg2.onload = function() {
                console.log('img2 Loading completed')
                let oImg3 = new Image()
                oImg3.onload = function() {
                    console.log('img3 Loading completed')
                    console.log('All loaded')
                }
                oImg3.src = url3
            }
            oImg2.src = url2
        }
        oImg1.src = url1

//No problem

Next let's try promise,

        function loadImg(url) {
            let img = new Image()
            img.src = url
            return new Promise((resolve, reject) => {
                img.onload = () => {
                    console.log(url)
                    resolve()
                }
                img.onerror = (e) => {
                    reject(e)
                }
            })
        }


        loadImg(url1).then(() => {
            return loadImg(url2)
        }).then(() => {
            return loadImg(url3)
        })

Let's take a look at Promise.all,

//Need to load three pictures img1 and img2 to complete some work
        let urls = ["https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3293635140,3955114282&fm=26&gp=0.jpg",
            "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1019333328,1858047370&fm=26&gp=0.jpg"
        ]


        function loadImg(url) {
            let img = new Image()
            img.src = url
            return new Promise((resolve, reject) => {
                img.onload = () => {
                    resolve(img)
                }
                img.onerror = (e) => {
                    reject(e)
                }
            })
        }

        function loadAll(arr) {
            let result = []
            arr.forEach(item => {
                let p = loadImg(item).then((img) => {
                        console.log(img)
                    })
                    //Store the current Promise object
                console.log(p)
                result.push(p)
            });
            Promise.all(result).then(() => {
                //Complete
                console.log("done")
            }).catch((err) => {
                // There are failures
                console.log(err)
            });
        }
        loadAll(urls)

Complete...