Promise-優雅な非同期コールバックソリューション

1つのインタフェースが別のインタフェースの要求データに依存する必要がある場合、通常、2つの解決策があります.1つは、要求データのインタフェースを同期に設定し、その後、別のインタフェースを調整します.2つは、要求データインタフェースの成功したコールバックで別のインタフェースを調整します.しかし、1つのインタフェースが多くのインタフェースの要求データに依存する必要がある場合、または別のインタフェースに依存する必要がある場合です.もう一人がもう一人に依存している場合はどうすればいいのでしょうか.もちろん、単一のインタフェース依存方式で階層的にネストすることができます.その結果、コード構造が混乱し、可読性が悪く、性能が悪い(多くのインタフェースに依存する必要がある場合は、多くのものを同期に設定する必要があります).

//    ：   Promise1，   Promise2，   Promise3 ...
function Promise1(){
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve({data:22});
        }, 2)
    })
}
function Promise2(data){
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(data);
        }, 200)
    })
}
function Promise3(data){
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(data);
        }, 200)
    })
}

Promise1()
.then((res) => {
    //   Promise2   
    return Promise2(res)
})
.then(res => {
    //   Promise3   
    return Promise3(res)
})
.then(res => {
    // Promise3
    console.log(res)
})
.catch((err) => {
    console.log('rejectd', err)
})

//    ：Promise3     Promise1 Promise2
// Promise all  ，       promise       
Promise.all([Promise1(), Promise2()])
.then(res => {
    return Promise3(res)
})
.then(res => {
    // Promise3
    console.log(res)
})
.catch((err) => {
    console.log('rejectd', err)
})