JS 同時獲取多個異步請求數據 Promise.all()

普通接口調用寫法.then() 或者 使用es6的 async/await 異步轉同步

//   function Index() {
//       普通調用嵌套寫法
//       console.time()
//       const p1 = new Promise((resolve, reject) => {
//         console.log('這里是p1')
//         setTimeout(() => {
//           resolve('這里是p1的返回')
//         }, 1000)
//       }).then((r1) => {
//         new Promise((resolve, reject) => {
//           console.log('這里是p2')
//           setTimeout(() => {
//             resolve('這里是p2的返回')
//           }, 1000)
//         }).then((r2) => {
//           console.log(r1)
//           console.log(r2)
//           console.timeEnd()
//         })
//       }) 
//     }
 
//異步轉同步
async function Index2() {
      console.time()
      const p1 =await new Promise((resolve, reject) => {
        console.log('這里是p1')
        setTimeout(() => {
          resolve('這里是p1的返回')
        }, 1000)
      })
      const p2 =await new Promise((resolve, reject) => {
        console.log('這里是p2')
        setTimeout(() => {
          resolve('這里是p2的返回')
        }, 1000)
      })
      console.log(p1)
      console.log(p2) 
      console.timeEnd()
   }
    //Index();
    Index2();

用時2

 

 

 使用Promise.all()來實現調用

  async function Index() {
      console.time()
      const p1 = new Promise((resolve, reject) => {
        console.log('這里是p1')
        setTimeout(() => {
          resolve('這里是p1的返回')
        }, 1000)
      })
      const p2 = new Promise((resolve, reject) => {
        console.log('這里是p2')
        setTimeout(() => {
          resolve('這里是p2的返回')
        }, 1000)
      })
      Promise.all([p1, p2]).then((val) => {
        console.log(val)
        console.timeEnd()
      })
       //當然也可以使用 async/await寫法
       /*   
        const p = await Promise.all([p1, p2])
        console.log(p);
        console.timeEnd(); 
        */
       //補充說明：如果我們的接口已經套上了一層 promise 便已經實現了同時執行異步的條件
       //下面這種寫法耗時和Promise.all也是一樣的，但是嵌套多了可能代碼就不太優雅了
       /*  p1.then((r1) => {
        p2.then((r2) => {
          console.log(r1)
          console.log(r2)
          console.timeEnd()
        })
      }) */
        
    }
    Index()

用時1s