promise 实现任务队列

<template>
  <div class="">
    <a href="https://blog.csdn.net/qq_42582773/article/details/140071791">promise 队列</a>
  </div>

</template>

<script setup>
/*
原理说明

new Promise((resolve) => {
  resolve(1)
}).then(value => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(value)
      resolve(2)
    }, 1000)
  })
}).then(value => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(value)
      resolve()
    }, 1000)
  })
})

 */

/*
map()实现Promise队列
const queue = (nums) => {
  let promise = Promise.resolve()
  nums.map(num => {
    promise = promise.then(_ => {
      return new Promise(resolve => {
        setTimeout(() => {
          console.log(num)
          resolve()   // 改变状态
        }, 1000)
      })
    })
  })
}

queue([1, 2, 3, 4, 5])

* */


/*
map()实现Promise队列
const queue2 = (tasks) => {
  let promise = Promise.resolve()
  tasks.map(task => {
    promise = promise.then(_ => {
      return task()
    })
  })
}

const task1 = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log("task1")
      resolve()
    }, 1000)
  })
}
const task2 = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log("task2")
      resolve()
    }, 1000)
  })
}
queue2([task1, task2])
* */


const reduceQueue = (nums) => {
  nums.reduce((promise, num) => {
    return promise.then(_ => {
      return new Promise(resolve => {
        setTimeout(() => {
          console.log(num)
          resolve()
        }, 1000)
      })
    })
  }, Promise.resolve())
}

reduceQueue([1, 2, 3, 4, 5])


</script>

<style lang="scss" scoped>
</style>