首页 >web前端 >js教程 >如何使用数组迭代通过 Promise 顺序传递参数?

如何使用数组迭代通过 Promise 顺序传递参数?

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-10-20 14:57:29855浏览

How to Sequentially Pass Parameters through Promises with Array Iteration?

使用数组迭代通过 Promise 顺序传递参数

考虑以下任务:

var myArray = [1, 2, 3, 4, 5, 6]<p>function myPromise(num){<br> return new Promise(res => {</p><pre class="brush:php;toolbar:false">window.setTimeout(()=>{
  res(  console.log("done: " + num)  )
},2000)

})
}

myPromise(myArray[0])
.then(x => myPromise(myArray[1]))
.then(x => myPromise(myArray[2]) )
.then(x => myPromise(myArray[3]))
.then(x => myPromise(myArray[4]))
.then(x => myPromise(myArray) [5]))

像上面这样的代码将顺序执行 Promise。然而,如果数组是动态填充的,为每个成员执行 myPromise() 就变得具有挑战性。

带有 Promises 的可暂停迭代

创建一个执行的“可暂停循环” myPromise() 顺序,等待解决后再继续:

折叠方法

myArray.reduce(
  (p, x) =>
    p.then(() => myPromise(x)),
  Promise.resolve()
)

此方法创建与数组元素一样多的 Promise,但如果这是可以接受的。

异步函数方法

const forEachSeries = async (iterable, action) => {
  for (const x of iterable) {
    await action(x)
  }
}

forEachSeries(myArray, myPromise)

异步函数提供了一种更具可读性和内存效率的解决方案。

收集返回值

如果要将返回值收集为数组:

const mapSeries = async (iterable, fn) => {
  const results = []

  for (const x of iterable) {
    results.push(await fn(x))
  }

  return results
}

或者,不支持异步函数:

const mapSeries = (iterable, fn) => {
  const iterator = iterable[Symbol.iterator]()
  const results = []
  const go = () => {
    const {value, done} = iterator.next()

    if (done) {
      return results
    }

    return fn(value).then(mapped => {
      results.push(mapped)
      return go()
    })
  }

  return Promise.resolve().then(go)
}

用法示例

使用 forEachSeries 方法的可运行代码片段:

const myArray = [1, 2, 3, 4, 5, 6]

const sleep = ms =>
  new Promise(res => {
    setTimeout(res, ms)
  })

const myPromise = num =>
  sleep(500).then(() => {
    console.log('done: ' + num)
  })

const forEachSeries = async (iterable, action) => {
  for (const x of iterable) {
    await action(x)
  }
}

forEachSeries(myArray, myPromise)
  .then(() => {
    console.log('all done!')
  })

以上是如何使用数组迭代通过 Promise 顺序传递参数?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn