Async await trong TypeScript: kiểu, lỗi và gọi song song

Một hàm async trong TypeScript luôn trả về promise: nếu thân hàm trả về string, kiểu của nó là Promise<string>. Bên trong hàm, await mở một Promise<T> thành T.

type Order = { id: number; total: number };

function fetchOrder(id: number): Promise<Order> {
    return new Promise((resolve) => setTimeout(() => resolve({ id, total: 42 }), 20));
}

async function orderSummary(id: number): Promise<string> {
    const order = await fetchOrder(id); // order: Order, not Promise<Order>
    return `Order #${order.id}: $${order.total.toFixed(2)}`;
}

async function main() {
    const text = await orderSummary(7);
    console.log(text); // Order #7: $42.00
}
main();

Hành vi lúc runtime (await tạm dừng cái gì, event loop) là của JavaScript, được trình bày ở async/await trong JavaScript. Phần của TypeScript là kiểu dữ liệu đi vào và đi ra.

Kiểu trả về của hàm async

Kiểu trả về được khai báo của hàm async phải là Promise<...>, dù thân hàm trả về giá trị thường. TypeScript sẽ tự suy luận nếu bạn không ghi.

async function count(): Promise<number> {
    return 3; // a number, wrapped in a promise automatically
}

async function log(message: string): Promise<void> {
    console.log(message); // returns nothing: Promise<void>
}

const double = async (n: number) => n * 2; // inferred: (n: number) => Promise<number>

class Repo {
    async findName(id: number): Promise<string | undefined> {
        return id === 1 ? "Ada" : undefined;
    }
}

async function main() {
    await log("start");
    console.log(await count(), await double(21)); // 3 42
    console.log(await new Repo().findName(2));   // undefined
}
main();

Viết async function count(): number gây lỗi TS1064 (The return type of an async function or method must be the global Promise<T> type. Did you mean to write 'Promise<number>'?). Utility type Awaited<T> cho kiểu đã được mở: Awaited<ReturnType<typeof count>> là number.

Quên await

Thiếu await khiến bạn cầm trong tay một Promise<T> thay vì T. TypeScript bắt được phần lớn trường hợp này vì các kiểu không còn khớp:

async function isAdmin(id: number): Promise<boolean> {
    return id === 1;
}

async function main() {
    const ok = isAdmin(2); // forgot await: ok is Promise<boolean>

    // @ts-expect-error: This condition will always return true since this 'Promise<boolean>' is always defined.
    if (ok) console.log("access granted (wrong!)");

    if (await isAdmin(2)) console.log("never printed");
    else console.log("access denied"); // correct
}
main();

Lỗi if (ok) là có thật: một đối tượng promise luôn là truthy, nên nó đã cấp quyền truy cập. TypeScript báo đó là TS2801. Gán promise cho một biến boolean, hoặc đọc một thuộc tính mà promise không có, cũng sẽ không biên dịch được. Một lời gọi mà bạn bỏ qua kết quả (save(user);) thì không bị bắt; quy tắc no-floating-promises của typescript-eslint lo việc đó.

Xử lý lỗi với try/catch

Một promise bị reject khiến await ném lỗi, nên try/catch thông thường vẫn dùng được. Với strict, biến trong catch có kiểu unknown, và bạn thu hẹp nó trước khi đọc .message:

async function loadConfig(name: string): Promise<{ port: number }> {
    if (name !== "prod") throw new Error(`no config named "${name}"`);
    return { port: 443 };
}

async function main() {
    try {
        const cfg = await loadConfig("dev");
        console.log(cfg.port);
    } catch (e) {
        // e: unknown
        if (e instanceof Error) console.log("failed:", e.message);
        else console.log("failed with", e);
    } finally {
        console.log("cleanup runs either way");
    }
}
main();
// failed: no config named "dev"
// cleanup runs either way

throw bên trong hàm async sẽ reject promise của nó thay vì ném lỗi tại chỗ gọi. Các mẫu khác, gồm lớp lỗi tùy chỉnh và trả về kết quả thay vì ném lỗi, có ở trang xử lý lỗi.

Top-level await

await bên ngoài mọi hàm chỉ chạy được trong ES module. Một tệp được biên dịch thành CommonJS (trường hợp của các ví dụ này, và của các dự án Node không có "type": "module") sẽ từ chối nó:

// This does not compile: top-level await in a CommonJS file.
const data = await Promise.resolve([1, 2, 3]);
console.log(data);

index.ts(2,14): error TS1309: The current file is a CommonJS module and cannot use 'await' at the top level.

Bọc code trong một hàm async main rồi gọi nó, như mọi ví dụ trên trang này. Trong dự án ES module ("type": "module" trong package.json với module đặt là node16 hoặc nodenext, hoặc module: "esnext" cho bundler), top-level await được cho phép.

Tuần tự và song song

Mỗi await chờ promise của nó xong rồi dòng tiếp theo mới bắt đầu. Với các lời gọi độc lập, hãy khởi chạy tất cả trước rồi await chúng cùng lúc bằng Promise.all:

const wait = (ms: number, label: string) =>
    new Promise<string>((resolve) => setTimeout(() => {
        console.log(`  finished ${label}`);
        resolve(label);
    }, ms));

async function main() {
    console.log("sequential:");
    const a = await wait(60, "a");
    const b = await wait(20, "b"); // starts only after a is done
    console.log(" ", [a, b]);

    console.log("parallel:");
    const [c, d] = await Promise.all([wait(60, "c"), wait(20, "d")]);
    console.log(" ", [c, d]); // results keep input order
}
main();

Ở nửa tuần tự, b không thể xong trước a vì nó chưa bắt đầu. Ở nửa song song, d xong trước, và tổng thời gian xấp xỉ lời gọi lâu nhất thay vì tổng của tất cả. Promise.all vẫn trả về kết quả theo thứ tự đầu vào, với kiểu là một tuple.

Cái bẫy forEach

forEach bỏ qua promise mà callback async trả về, nên không có gì chờ công việc hoàn tất:

const sleep = (ms: number) => new Promise<void>((r) => setTimeout(r, ms));

async function main() {
    const ids = [1, 2, 3];

    ids.forEach(async (id) => {
        await sleep(10);
        console.log("forEach saved", id);
    });
    console.log("after forEach (runs first!)");
    await sleep(50); // only so the output above appears in order

    for (const id of ids) {
        await sleep(10);
        console.log("for...of saved", id);
    }
    console.log("after for...of (really after)");

    await Promise.all(ids.map(async (id) => {
        await sleep(10);
        console.log("map saved", id);
    }));
    console.log("after Promise.all (really after)");
}
main();

for...of với await xử lý từng phần tử một; Promise.all với map chạy chúng song song và chờ tất cả. forEach không làm được cả hai, và TypeScript không cảnh báo, vì một callback có kiểu trả về void vẫn chấp nhận callback trả về promise.

Lặp bất đồng bộ với for await

for await...of lặp qua một async iterable, chẳng hạn async generator, và await từng giá trị:

async function* pages(total: number): AsyncGenerator<string[]> {
    for (let page = 1; page <= total; page++) {
        await new Promise((r) => setTimeout(r, 10));
        yield [`item ${page}a`, `item ${page}b`];
    }
}

async function main() {
    for await (const batch of pages(3)) {
        console.log(batch.join(", ")); // batch: string[]
    }
}
main();

Kiểu phần tử lấy từ chú thích AsyncGenerator<T> của generator, hoặc được suy luận khi bạn không ghi.