Appearance

On this page

paralleTask ​

并行执行多个任务，并按照它们被触发的顺序返回结果。

使用场景 ​

假设你有一组需要并行执行的异步任务，例如网络请求、文件读取、数据库查询等，你想要控制同时执行的任务数量，并且希望按照任务触发的顺序返回任务的执行结果。

使用 paralleTask 函数可以实现这样的效果。它允许你传入一个由返回 Promise 的函数组成的数组 tasks，并指定同时执行的最大任务数 paralleCount。

示例 ​

<script setup lang="ts">
import { ref } from 'vue'
import { paralleTask } from 'hyh-toolkit'

const result = ref<string[]>([])
const taskCount = ref(10)
const paralleCount = ref(3)

function createTasks() {
  return Array.from(
    { length: taskCount.value },
    (_, i) => () =>
      new Promise<string>((resolve, reject) => {
        const flag = Math.random() > 0.5
        const time = Math.floor(Math.random() * 3000 + 1000)
        const message = `第${i + 1}个任务执行${flag ? '成功' : '失败'} 耗时: ${time}ms`
        setTimeout(() => (flag ? resolve : reject)(message), time)
      }),
  )
}

async function handleStart() {
  result.value = []
  const tasks = createTasks()
  await paralleTask(
    tasks,
    (res) => {
      result.value.push(res.status === 'fulfilled' ? res.value : res.reason)
    },
    paralleCount.value,
  )
  result.value.push('所有任务执行完毕')
}
</script>

<template>
  <div>
    <section class="flex flex-items-center">
      <label class="w300px h50px mr20px flex flex-items-center">
        <p class="w-20">任务数:</p>
        <el-input v-model="taskCount" autofocus />
      </label>
      <label class="w300px h50px mr20px flex flex-items-center">
        <p class="w-20">并发数:</p>
        <el-input v-model="paralleCount" />
      </label>
      <el-button @click="handleStart">
        开始
      </el-button>
    </section>
    <ul class="m0! max-h300px overflow-y-auto">
      <li v-for="it in result" :key="it">
        {{ it }}
      </li>
    </ul>
  </div>
</template>

<style scoped></style>

API ​

ts
const result = await paralleTask(tasks, callBack, paralleCount)

Params ​

参数说明类型默认值
tasks返回 Promise 的函数数组(() => Promise<T>)[]必传
callBack传入一个回调函数，在每个确定的 Promise 结果时调用(result: PromiseSettledResult<T>) => voidundefined
paralleCount最大并行执行任务数number3

Result ​

参数说明类型
result返回一个 Promise, 解析为一组已完成的 Promise 结果数组Promise<PromiseSettledResult<T>[]>