前端控制异步任务执行顺序
时间: 2025-03-05 16:06:21 浏览: 43
### 前端 JavaScript 中控制异步任务执行顺序的方法
#### 使用 `Promise` 链式调用
链式调用是处理多个依赖于彼此完成的异步操作的有效方式。每个 `.then()` 或者 `.catch()` 方法都会返回一个新的 Promise 对象,允许进一步的操作被附加到链条上。
```javascript
function taskA() {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('Task A completed');
resolve();
}, 1000);
});
}
function taskB() {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('Task B completed');
resolve();
}, 500);
});
}
taskA()
.then(taskB)
.then(() => console.log('All tasks are done'))[^1];
```
#### 利用 `async/await`
此语法糖使得编写更易读且结构化的异步代码成为可能。它本质上是在等待 Promises 完成的同时暂停函数执行直到它们解决或拒绝。
```javascript
async function executeTasksSequentially() {
await taskA(); // Wait for Task A to complete before moving on.
await taskB(); // Only start Task B after Task A has finished.
console.log('Both tasks have been executed sequentially.');
}
executeTasksSequentially()[^3];
```
#### 处理并发任务并指定其运行次序
当有若干独立不相依的任务需同时启动但又希望按特定序列获取结果时,可借助 `Promise.all([])` 来实现这一点。这会创建一个新 promise,在所有给定输入 promises 成功完成后才会解析,并传递由这些 promises 结果组成的数组作为参数。
```javascript
// Assume both functions now return resolved values instead of just logging messages.
const allPromises = [taskA(), taskB()];
Promise.all(allPromises).then(results => {
console.log(`Results from all tasks: ${results}`);
});
```
对于微任务(microtasks),如 MutationObserver 和 process.nextTick (Node.js),以及宏任务(macrotasks)像 timers (`setTimeout`, `setInterval`)、I/O operations 等之间的区别也值得注意。前者会在当前同步任务结束后立即被执行,而后者则会被放入事件队列中等待下一次循环迭代来处理[^4]。
阅读全文
相关推荐


















