TypeScript async/await

async/await 是建立在 Promise 之上的语法糖,让异步代码读起来像同步代码,避免 then 回调层层嵌套。TypeScript 中 async 函数始终返回 Promise,await 会"解包" Promise 拿回其中的值,并自动推断出值的类型。

1. 定义 async 函数

在函数前加 async,函数体返回的值会被自动包装成 Promise,返回类型应写 Promise<T>

async function hello(): Promise<string> {
    return "你好";
}
console.log(hello()); // 输出:Promise { '你好' }

2. await 等待结果

await 只能在 async 函数内使用,它会暂停当前函数,直到 Promise 完成后再继续执行并取出成功值:

function delay(ms: number): Promise<void> {
    return new Promise((resolve) => setTimeout(resolve, ms));
}
async function main(): Promise<void> {
    console.log("开始");
    await delay(1000);
    console.log("1 秒后执行"); // 输出:开始 → 1 秒后执行
}
main();

3. 类型推断

await 一个 Promise<T> 得到类型 T,编译器会自动推断,无需手动断言:

async function fetchScore(): Promise<number> {
    return 95;
}
async function show(): Promise<void> {
    const score: number = await fetchScore(); // 自动推断为 number
    console.log(`分数:${score}`);            // 输出:分数:95
}
show();

4. 错误处理 try/catch

async 函数内抛出异常、或 await 的 Promise 被拒绝,都会进入 catch 分支;finally 无论成败都会执行:

async function risky(): Promise<string> {
    throw new Error("出错了");
}
async function run(): Promise<void> {
    try {
        await risky();
    } catch (err) {
        console.log("捕获到错误:", (err as Error).message); // 输出:捕获到错误:出错了
    } finally {
        console.log("收尾工作"); // 输出:收尾工作
    }
}
run();

5. 串行与并行

依次 await 是串行执行;互不依赖的任务应当并行,用 Promise.all 一次性等待全部完成:

async function stepA(): Promise<number> {
    return 1;
}
async function stepB(): Promise<number> {
    return 2;
}
async function runAll(): Promise<void> {
    const results: number[] = await Promise.all([stepA(), stepB()]);
    console.log(results); // 输出:[1, 2]
}
runAll();

小结

async 函数返回 Promise,await 取出结果并自动推断类型;错误用 try/catch 捕获,相互独立的任务用 Promise.all 并行。掌握了 async/await,复杂的异步流程也能写得像同步代码一样清晰。

笔记加载中…