TypeScript 的 async 函数不需要显式配置调度器。执行机制由 JavaScript 运行时(浏览器或 Node.js)内置提供。
内置机制
1. 编译后的代码
TypeScript 的 async/await 会被编译成标准的 JavaScript Promise:
// TypeScript 代码
async function getDetails(planId: string) {
const response = await fetch('/api/details')
return response.json()
}
编译后大致等价于:
function getDetails(planId) {
return fetch('/api/details')
.then(response => response.json())
}
2. 执行机制
async 函数的执行依赖:
- Promise:异步操作的基础
- 事件循环(Event Loop):由运行时提供,负责调度异步任务
- 微任务队列(Microtask Queue):Promise 回调在这里执行
实际执行流程
以 common-api-service.ts 中的代码为例:
``25:27:ui-vue3/src/api/common-api-service.ts
public static async getDetails(planId: string): Promise${this.BASE_URL}/details/${planId})
`
typescript
async function delayedFetch() {
await new Promise(resolve => setTimeout(resolve, 1000)) // 延迟 1 秒
return fetch('/api/data')
}
执行流程:
1. 调用 `getDetails()` 返回一个 Promise
2. `fetch()` 发起网络请求(浏览器/Node.js 处理)
3. `await` 暂停函数执行,将后续代码放入微任务队列
4. 网络请求完成后,Promise resolve,微任务被调度执行
5. 继续执行后续代码
## 无需配置的原因
### 浏览器环境
- 事件循环由浏览器引擎(V8、SpiderMonkey 等)提供
- `fetch` API 由浏览器实现
- Promise 和微任务队列已内置
### Node.js 环境
- 事件循环由 libuv 提供
- `fetch`(Node 18+)或 `http` 模块处理网络请求
- Promise 和微任务队列已内置
## 如果需要自定义调度
虽然不需要配置,但在某些场景下可以控制执行时机:
### 1. 使用 `setTimeout` 延迟执行
typescript
async function customSchedule() {
await new Promise(resolve => queueMicrotask(resolve))
// 确保在下一个微任务队列中执行
}
### 2. 使用 `queueMicrotask` 控制微任务
typescript
// 在单独的线程中执行
const worker = new Worker('worker.js')
worker.postMessage({ type: 'fetch', url: '/api/data' })
### 3. 使用 Web Workers(浏览器)
总结
- 不需要显式配置:调度器由运行时内置提供
- 自动调度:事件循环自动处理异步任务
- 无需额外设置:直接使用 async/await
即可
中,所有 async` 函数都会自动使用这些内置机制,无需额外配置。