JavaScript Promise 中怎么在 Promise 链中实现优雅的渐进式延迟-js教程-PHP中文网

promise链中实现渐进式延迟需封装delay函数，支持递增毫秒值、透传数据及错误冒泡，并可用.then(delay())或async/await自然嵌入链中。

javascript promise 中怎么在 promise 链中实现优雅的渐进式延迟

在 Promise 链中实现优雅的渐进式延迟，核心是封装一个可复用的 delay 函数，并配合 Promise.resolve().then(...) 或 async/await 自然嵌入链中，避免阻塞、不破坏链式结构，同时让延迟时间随步骤递增（如 100ms → 300ms → 600ms）。

封装带递增值的 delay 工具函数

用闭包或工厂函数生成“渐进式延迟器”，每次调用返回不同等待时长：

基础版：传入起始毫秒数和增长步长，返回一个按序递增的 delay 函数

示例：

const progressiveDelay = (start = 100, step = 200) => {
  let current = start;
  return () => new Promise(resolve => setTimeout(resolve, current, current));
};

调用后每次执行都返回当前延迟值，并自动累加：const delay = progressiveDelay(100, 200); delay(); // 100ms, next call → 300ms

在 Promise 链中自然插入延迟节点

不使用 setTimeout 手动嵌套，而是让 delay 成为链中一个“透明”的异步中间件：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

用 .then(delay()) 插入（注意括号调用返回 Promise）

完整链示例：

fetch('/api/a')
  .then(res => res.json())
  .then(data => console.log('Step 1:', data))
  .then(delay()) // 100ms
  .then(() => fetch('/api/b'))
  .then(res => res.json())
  .then(data => console.log('Step 2:', data))
  .then(delay()) // 300ms
  .then(() => fetch('/api/c'))
  .then(res => res.json())
  .then(data => console.log('Step 3:', data));

关键点：每个 delay() 返回的是新 Promise，不中断数据流；若需透传上一步值，可改写为 delay().then(() => value)

支持透传值与错误冒泡的增强写法

实际项目中常需延迟后继续传递前序结果，且不能吞掉异常：

改进 delay 函数，接收并原样返回上一步的值：

const delayWithValue = (ms) => (value) =>
  new Promise(resolve => setTimeout(() => resolve(value), ms));

链中直接用：.then(delayWithValue(200))，后续 .then(data => ...) 仍能拿到原始 data
错误会自然沿链向下传递，无需额外 catch 干预 —— 这正是 Promise 链健壮性的体现

用 async/await 写更直观的渐进流程

对逻辑较重的多步延迟操作，async 函数更易读且天然支持动态计算延迟时间：

示例：

async function runWithProgressiveDelay() {
  const steps = [100, 300, 600];
  let data;

  data = await fetch('/api/a').then(r => r.json());
  console.log('A done');

  for (let i = 0; i  setTimeout(r, steps[i]));
    data = await fetch('/api/b').then(r => r.json());
    console.log(`B step ${i + 1} done`);
  }
}