SOURCE

// const p1 = new Promise(function (resolve, reject) {
//   setTimeout(() => resolve('p1'), 3000)
// })

// const p2 = new Promise(function (resolve, reject) {
//   setTimeout(() =>{
//        resolve(p1)
//   }, 1000)
// })

// p2.then(result => console.log(result)).then(value => {
//     console.log('p2')
// }).catch(error => console.log(error))

// function f1() {
//     setTimeout(() => {
//         console.log('p1')
//     },2000)
// }

// function f2() {
//     setTimeout(() => {
//         console.log('p2')
//     }, 100)
// }

// const p = Promise.resolve(f1()).then(() => {
//     f2()
// })

const p1 = new Promise(function (resolve, reject) {
  setTimeout(() =>{
      console.log('p1')
      resolve()
  }, 3000)
})

const p2 = () => new Promise(function (resolve, reject) {
   setTimeout(() =>{
      console.log('p2')
      resolve()
  }, 2000)
})

const p3 = () => new Promise(function (resolve, reject) {
   setTimeout(() =>{
    //   console.log('p3')
      resolve()
    throw new Error('wrong')
  }, 1000)
})


const p4 = Promise.resolve(p1).then(() => p2())
.then(() => p3())
.then(() => {
    setTimeout(() =>{
        console.log('p4')
    }, 1000)
}).catch(err => {
    console.log(err, 'error')
})

<div id="box"></div>

#box{
    width: 100px;
    height: 100px;
    /* background-color: red; */
}