TypeScript 等待|极客教程

TypeScript 等待

在软件开发中，我们经常会遇到需要等待某个异步操作完成后再执行下一步操作的情况。在 JavaScript 中，我们可以使用回调函数、Promise 或 async/await 等方式来处理异步操作。而在 TypeScript 中，我们也可以使用这些方式来等待异步操作。

回调函数

回调函数是处理异步操作最基础的方式之一。通过将一个函数作为参数传递给另一个函数，在异步操作完成后调用这个函数来处理结果。

function fetchData(callback: (data: string) => void) {
    setTimeout(() => {
        const data = 'Hello, TypeScript';
        callback(data);
    }, 1000);
}

fetchData((data) => {
    console.log(data);
});

在上面的示例中，我们定义了一个 fetchData 函数用于模拟异步操作，然后通过传递一个回调函数的方式处理异步操作的结果。

Promise

Promise 是 ES6 中新增的特性，用于处理异步操作。它可以代表一个异步操作的最终完成或失败，以及其返回结果。

function fetchData(): Promise<string> {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = 'Hello, TypeScript';
            resolve(data);
        }, 1000);
    });
}

fetchData().then((data) => {
    console.log(data);
});

在上面的示例中，我们定义了一个 fetchData 函数返回一个 Promise 对象，然后通过调用 then 方法来处理异步操作的结果。

async/await

async/await 是 ES8 中新增的异步操作处理语法糖，它基于 Promise 实现，能够更加简洁地处理异步操作。

function fetchData(): Promise<string> {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = 'Hello, TypeScript';
            resolve(data);
        }, 1000);
    });
}

async function getData() {
    const data = await fetchData();
    console.log(data);
}

getData();

在上面的示例中，我们定义了一个 fetchData 函数返回一个 Promise 对象，然后在 getData 函数中使用 async/await 来等待异步操作的完成。