JavaScript中Promise如何处理异步的并行与串行

发布时间：2022-12-28 15:58:49 作者：iii
来源：亿速云阅读：146

JavaScript中Promise如何处理异步的并行与串行

在现代JavaScript开发中，异步编程是一个非常重要的概念。随着应用程序变得越来越复杂，处理异步操作的需求也日益增加。JavaScript提供了多种处理异步操作的方式，其中Promise是最常用的一种。Promise不仅简化了异步代码的编写，还提供了强大的功能来处理并行和串行的异步操作。

本文将深入探讨如何在JavaScript中使用Promise来处理异步的并行与串行操作。我们将从Promise的基础知识开始，逐步深入到并行与串行的具体实现，并通过大量的代码示例来帮助读者更好地理解这些概念。

Promise基础知识

什么是Promise？

Promise是JavaScript中用于处理异步操作的对象。它表示一个异步操作的最终完成（或失败）及其结果值。Promise有三种状态：

Pending（进行中）：初始状态，既不是成功，也不是失败状态。
Fulfilled（已成功）：意味着操作成功完成。
Rejected（已失败）：意味着操作失败。

创建Promise

我们可以通过new Promise()构造函数来创建一个Promise对象。构造函数接受一个函数作为参数，这个函数有两个参数：resolve和reject。resolve用于将Promise状态从Pending变为Fulfilled，而reject用于将Promise状态从Pending变为Rejected。

const myPromise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve("操作成功");
    } else {
      reject("操作失败");
    }
  }, 1000);
});

myPromise
  .then((result) => {
    console.log(result); // 输出: 操作成功
  })
  .catch((error) => {
    console.error(error); // 输出: 操作失败
  });

Promise链式调用

Promise支持链式调用，这意味着我们可以在一个Promise完成后继续执行另一个Promise。通过then方法，我们可以将多个异步操作串联起来。

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("第一步完成");
  }, 1000);
});

promise1
  .then((result) => {
    console.log(result); // 输出: 第一步完成
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("第二步完成");
      }, 1000);
    });
  })
  .then((result) => {
    console.log(result); // 输出: 第二步完成
  })
  .catch((error) => {
    console.error(error);
  });

Promise.all

Promise.all方法接受一个Promise数组作为参数，并返回一个新的Promise。这个新的Promise在所有输入的Promise都成功完成时才会被resolve，并且返回的结果是一个包含所有Promise结果的数组。如果其中任何一个Promise被reject，则整个Promise.all会被reject。

const promise1 = Promise.resolve("第一步完成");
const promise2 = Promise.resolve("第二步完成");
const promise3 = Promise.resolve("第三步完成");

Promise.all([promise1, promise2, promise3])
  .then((results) => {
    console.log(results); // 输出: ["第一步完成", "第二步完成", "第三步完成"]
  })
  .catch((error) => {
    console.error(error);
  });

Promise.race

Promise.race方法也接受一个Promise数组作为参数，并返回一个新的Promise。这个新的Promise在数组中任何一个Promise完成（无论是resolve还是reject）时就会被resolve或reject。

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("第一步完成");
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("第二步完成");
  }, 500);
});

Promise.race([promise1, promise2])
  .then((result) => {
    console.log(result); // 输出: 第二步完成
  })
  .catch((error) => {
    console.error(error);
  });

异步操作的并行处理

在实际开发中，我们经常需要同时执行多个异步操作，并在所有操作完成后进行下一步处理。Promise.all是实现并行处理的一个强大工具。

使用Promise.all进行并行处理

假设我们有三个异步操作，分别需要1秒、2秒和3秒完成。我们希望在所有操作完成后输出结果。

const asyncOperation1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("操作1完成");
  }, 1000);
});

const asyncOperation2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("操作2完成");
  }, 2000);
});

const asyncOperation3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("操作3完成");
  }, 3000);
});

Promise.all([asyncOperation1, asyncOperation2, asyncOperation3])
  .then((results) => {
    console.log(results); // 输出: ["操作1完成", "操作2完成", "操作3完成"]
  })
  .catch((error) => {
    console.error(error);
  });

在这个例子中，Promise.all会等待所有三个Promise都完成后才执行then回调函数。即使asyncOperation1在1秒后完成，asyncOperation2在2秒后完成，asyncOperation3在3秒后完成，Promise.all也会在所有操作完成后才输出结果。

处理并行操作中的错误

在使用Promise.all时，如果任何一个Promise被reject，整个Promise.all会被reject。这意味着我们需要在catch中处理错误。

const asyncOperation1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("操作1完成");
  }, 1000);
});

const asyncOperation2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject("操作2失败");
  }, 2000);
});

const asyncOperation3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("操作3完成");
  }, 3000);
});

Promise.all([asyncOperation1, asyncOperation2, asyncOperation3])
  .then((results) => {
    console.log(results);
  })
  .catch((error) => {
    console.error(error); // 输出: 操作2失败
  });

在这个例子中，asyncOperation2在2秒后被reject，导致整个Promise.all被reject，并且catch回调函数会输出错误信息。

并行处理中的部分成功

有时候，我们希望在并行处理中即使某些操作失败，也能继续处理其他操作的结果。在这种情况下，我们可以使用Promise.allSettled。

const asyncOperation1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("操作1完成");
  }, 1000);
});

const asyncOperation2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject("操作2失败");
  }, 2000);
});

const asyncOperation3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("操作3完成");
  }, 3000);
});

Promise.allSettled([asyncOperation1, asyncOperation2, asyncOperation3])
  .then((results) => {
    console.log(results);
    // 输出:
    // [
    //   { status: 'fulfilled', value: '操作1完成' },
    //   { status: 'rejected', reason: '操作2失败' },
    //   { status: 'fulfilled', value: '操作3完成' }
    // ]
  });

Promise.allSettled会等待所有Promise都完成（无论是resolve还是reject），并返回一个包含每个Promise结果的对象数组。每个对象包含status和value（或reason）属性，表示该Promise的状态和结果。

异步操作的串行处理

在某些情况下，我们需要按照特定的顺序执行异步操作，即一个操作完成后才能开始下一个操作。这种处理方式称为串行处理。

使用Promise链式调用进行串行处理

我们可以通过Promise的链式调用来实现串行处理。每个then回调函数返回一个新的Promise，从而确保下一个操作在前一个操作完成后才开始。

const asyncOperation1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("操作1完成");
  }, 1000);
});

const asyncOperation2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("操作2完成");
  }, 2000);
});

const asyncOperation3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("操作3完成");
  }, 3000);
});

asyncOperation1
  .then((result) => {
    console.log(result); // 输出: 操作1完成
    return asyncOperation2;
  })
  .then((result) => {
    console.log(result); // 输出: 操作2完成
    return asyncOperation3;
  })
  .then((result) => {
    console.log(result); // 输出: 操作3完成
  })
  .catch((error) => {
    console.error(error);
  });

在这个例子中，asyncOperation1完成后，asyncOperation2才会开始，asyncOperation2完成后，asyncOperation3才会开始。这种方式确保了异步操作的顺序执行。

使用async/await进行串行处理

async/await是ES7引入的语法糖，它使得异步代码的编写更加简洁和直观。我们可以使用async/await来实现串行处理。

const asyncOperation1 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("操作1完成");
    }, 1000);
  });
};

const asyncOperation2 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("操作2完成");
    }, 2000);
  });
};

const asyncOperation3 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("操作3完成");
    }, 3000);
  });
};

const runSerialOperations = async () => {
  try {
    const result1 = await asyncOperation1();
    console.log(result1); // 输出: 操作1完成

    const result2 = await asyncOperation2();
    console.log(result2); // 输出: 操作2完成

    const result3 = await asyncOperation3();
    console.log(result3); // 输出: 操作3完成
  } catch (error) {
    console.error(error);
  }
};

runSerialOperations();

在这个例子中，我们使用async关键字定义了一个异步函数runSerialOperations，并在其中使用await关键字来等待每个异步操作的完成。这种方式使得代码更加简洁和易读。

串行处理中的错误处理

在串行处理中，如果任何一个操作失败，后续的操作将不会执行。我们可以在catch中处理错误。

const asyncOperation1 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("操作1完成");
    }, 1000);
  });
};

const asyncOperation2 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject("操作2失败");
    }, 2000);
  });
};

const asyncOperation3 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("操作3完成");
    }, 3000);
  });
};

const runSerialOperations = async () => {
  try {
    const result1 = await asyncOperation1();
    console.log(result1); // 输出: 操作1完成

    const result2 = await asyncOperation2();
    console.log(result2); // 不会执行

    const result3 = await asyncOperation3();
    console.log(result3); // 不会执行
  } catch (error) {
    console.error(error); // 输出: 操作2失败
  }
};

runSerialOperations();

在这个例子中，asyncOperation2在2秒后被reject，导致runSerialOperations函数中的catch回调函数被执行，并且后续的asyncOperation3不会执行。

并行与串行的结合使用

在实际开发中，我们经常需要结合并行和串行处理来满足复杂的业务需求。例如，我们可能需要先并行执行一组操作，然后在所有操作完成后串行执行另一组操作。

并行与串行结合的例子

假设我们有两个并行操作asyncOperation1和asyncOperation2，它们完成后，我们需要串行执行asyncOperation3和asyncOperation4。

const asyncOperation1 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("操作1完成");
    }, 1000);
  });
};

const asyncOperation2 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("操作2完成");
    }, 2000);
  });
};

const asyncOperation3 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("操作3完成");
    }, 1000);
  });
};

const asyncOperation4 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("操作4完成");
    }, 2000);
  });
};

const runCombinedOperations = async () => {
  try {
    // 并行执行操作1和操作2
    const [result1, result2] = await Promise.all([asyncOperation1(), asyncOperation2()]);
    console.log(result1); // 输出: 操作1完成
    console.log(result2); // 输出: 操作2完成

    // 串行执行操作3和操作4
    const result3 = await asyncOperation3();
    console.log(result3); // 输出: 操作3完成

    const result4 = await asyncOperation4();
    console.log(result4); // 输出: 操作4完成
  } catch (error) {
    console.error(error);
  }
};

runCombinedOperations();

在这个例子中，我们首先使用Promise.all并行执行asyncOperation1和asyncOperation2，然后在它们完成后串行执行asyncOperation3和asyncOperation4。

并行与串行结合的错误处理

在结合并行和串行处理时，我们需要特别注意错误处理。如果并行操作中的任何一个操作失败，整个Promise.all会被reject，并且后续的串行操作不会执行。

const asyncOperation1 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("操作1完成");
    }, 1000);
  });
};

const asyncOperation2 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject("操作2失败");
    }, 2000);
  });
};

const asyncOperation3 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("操作3完成");
    }, 1000);
  });
};

const asyncOperation4 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("操作4完成");
    }, 2000);
  });
};

const runCombinedOperations = async () => {
  try {
    // 并行执行操作1和操作2
    const [result1, result2] = await Promise.all([asyncOperation1(), asyncOperation2()]);
    console.log(result1); // 不会执行
    console.log(result2); // 不会执行

    // 串行执行操作3和操作4
    const result3 = await asyncOperation3();
    console.log(result3); // 不会执行

    const result4 = await asyncOperation4();
    console.log(result4); // 不会执行
  } catch (error) {
    console.error(error); // 输出: 操作2失败
  }
};

runCombinedOperations();

在这个例子中，asyncOperation2在2秒后被reject，导致整个Promise.all被reject，并且后续的asyncOperation3和asyncOperation4不会执行。

常见问题与解决方案

1. 如何处理并行操作中的部分失败？

在某些情况下，我们希望即使并行操作中的某些操作失败，也能继续处理其他操作的结果。我们可以使用Promise.allSettled来实现这一点。

const asyncOperation1 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("操作1完成");
    }, 1000);
  });
};

const asyncOperation2 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject("操作2失败");
    }, 2000);
  });
};

const asyncOperation3 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("操作3完成");
    }, 3000);
  });
};

const runPartialFailures = async () => {
  try {
    const results = await Promise.allSettled([asyncOperation1(), asyncOperation2(), asyncOperation3()]);
    console.log(results);
    // 输出:
    // [
    //   { status: 'fulfilled', value: '操作1完成' },
    //   { status: 'rejected', reason: '操作2失败' },
    //   { status: 'fulfilled', value: '操作3完成' }
    // ]
  } catch (error) {
    console.error(error);
  }
};

runPartialFailures();

在这个例子中，即使asyncOperation2失败，Promise.allSettled仍然会返回所有操作的结果，并且我们可以根据每个操作的状态来处理结果。

2. 如何取消一个Promise？

JavaScript中的Promise本身并不支持取消操作。但是，我们可以通过一些技巧来实现类似的效果。例如，我们可以使用一个标志变量来控制Promise的执行。

”`javascript const cancellable

JavaScript中Promise如何处理异步的并行与串行

JavaScript中Promise如何处理异步的并行与串行

目录

Promise基础知识

什么是Promise？

创建Promise

Promise链式调用

Promise.all

Promise.race

异步操作的并行处理

使用Promise.all进行并行处理

处理并行操作中的错误

并行处理中的部分成功

异步操作的串行处理

使用Promise链式调用进行串行处理

使用async/await进行串行处理

串行处理中的错误处理

并行与串行的结合使用

并行与串行结合的例子

并行与串行结合的错误处理

常见问题与解决方案

1. 如何处理并行操作中的部分失败？

2. 如何取消一个Promise？

相关阅读