題目

    ajaxArray是一個非同步請求陣列，完成mergePromise函式達到以下輸出，並返回一個Promise物件

const ajax1 = () =>
  timeout(2000).then(() => {
    console.log('1')
    return 1
  })

const ajax2 = () =>
  timeout(1000).then(() => {
    console.log('2')
    return 2
  })

const ajax3 = () =>
  timeout(2000).then(() => {
    console.log('3')
    return 3
  })
const mergePromise = ajaxArray => {}
mergePromise([ajax1, ajax2, ajax3]).then(data => {
      console.log('done');
      console.log(data);
    });
分別輸出
1
2
3
done
[1, 2, 3]
 */
 

題目分析

    ajaxArray是一個非同步請求陣列，其中執行時間不定，而要達到將資料按執行順序儲存到陣列，自然可以想到Async/await，可以依次執行陣列各項，並返回一個Promise

程式碼

let timeout = time => {
  return new Promise((resolve, reject) => {
    setTimeout(_ => resolve(), time)
  })
}
const ajax1 = () =>
  timeout(2000).then(() => {
    console.log('1')
    return 1
  })

const ajax2 = () =>
  timeout(1000).then(() => {
    console.log('2')
    return 2
  })

const ajax3 = () =>
  timeout(2000).then(() => {
    console.log('3')
    return 3
  })
const mergePromise = ajaxArray => {
  return new Promise((resolve, reject) => {
    async function asyFun(ajaxArray) {
      let data = []
      for (let key in ajaxArray) {
        await ajaxArray[key]().then(d => {
          data.push(d)
        })
      }
      return data
    }
    asyFun(ajaxArray).then(valueArray => {
      resolve(valueArray)
    })
  })
}
mergePromise([ajax1, ajax2, ajax3]).then(data => {
  console.log('done')
  console.log(data) // data 為 [1, 2, 3]
})
 

另一種解法---非原創

const ajax1 = () =>
  timeout(2000).then(() => {
    console.log('1')
    return 1
  })

const ajax2 = () =>
  timeout(1000).then(() => {
    console.log('2')
    return 2
  })

const ajax3 = () =>
  timeout(2000).then(() => {
    console.log('3')
    return 3
  })
const mergePromise = ajaxArray => {
  return new Promise((resolve, reject) => {
    //返回一個新的Promise
    let arr = [] //定義一個空陣列存放結果
    let i = 0
    function handleData(index, data) {
      //處理資料函式
      arr[index] = data
      i++
      if (i === ajaxArray.length) {
        //當i等於傳遞的陣列的長度時
        resolve(arr) //執行resolve,並將結果放入
      }
    }
    function handlePromise(i) {
      if (i >= ajaxArray.length) return
      ajaxArray[i]().then(data => {
        handleData(i, data) //將結果和索引傳入handleData函式
        handlePromise(i + 1)
      }, reject)
    }
    handlePromise(0)
    // for (let i = 0; i < ajaxArray.length; i++) { //迴圈遍歷陣列
    // ajaxArray[i]().then((data) => {
    //     handleData(i, data); //將結果和索引傳入handleData函式
    // }, reject)
    // }
  })
}
mergePromise([ajax1, ajax2, ajax3]).then(data => {
  console.log('done');
  console.log(data); // data 為 [1, 2, 3]
});