TypeScript异步函数|极客教程

TypeScript异步函数

在JavaScript中，异步操作是为了解决任务耗时过长而导致整个程序被阻塞的问题，常见的异步操作包括网络请求、定时器、事件监听等。而在TypeScript中，我们可以使用异步函数来处理这些操作，以保证程序的流畅运行。

异步函数概述

异步函数是一种特殊的函数，它在执行时不会阻塞主线程的运行。当函数内部发起了一个异步操作时，主线程会继续执行后续代码，待异步操作完成后再执行对应的回调函数。

在TypeScript中，可以使用async和await关键字来定义和调用异步函数。async关键字用于声明一个函数是异步函数，而await关键字用于等待一个异步操作的完成。

下面是一个简单的异步函数示例：

async function fetchData() {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    const data = await response.json();

    console.log(data);
}

fetchData();

在上面的示例中，fetchData函数使用async关键字声明为异步函数，内部使用await关键字来等待fetch方法和json方法的完成。这样就可以确保在获取数据之前不会执行后续代码。

异步函数类型

在TypeScript中，异步函数有两种类型：返回Promise的函数和返回void的函数。

返回`Promise`的函数

返回Promise的函数是指函数执行后会返回一个Promise对象，这种类型的函数通常用于处理需要进行异步操作并返回结果的情况。

下面是一个返回Promise的函数示例：

async function fetchData(): Promise<string> {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    const data = await response.json();

    return data.title;
}

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

在上面的示例中，fetchData函数返回一个Promise<string>类型的数据，通过then方法获取异步操作的结果。

返回`void`的函数

返回void的函数是指函数执行后不会返回任何结果，这种类型的函数通常用于处理消耗性任务或无需返回结果的情况。

下面是一个返回void的函数示例：

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

logMessage('Hello, TypeScript');

在上面的示例中，logMessage函数返回一个Promise<void>类型的数据，用于打印传入的消息。

异步函数错误处理

在异步函数中，经常会遇到异步操作失败的情况，此时需要对错误进行处理以保证程序的正常运行。

在TypeScript中，可以使用try...catch语句对异步操作中的错误进行捕获和处理。

下面是一个简单的异步函数错误处理示例：

async function fetchDataWithErrorHandling() {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts/1a');
        if (!response.ok) {
            throw new Error('Failed to fetch data');
        }
        const data = await response.json();

        console.log(data);
    } catch (error) {
        console.error(error.message);
    }
}

fetchDataWithErrorHandling();

在上面的示例中，当fetch方法获取数据失败时，会抛出一个错误并在内部使用catch语句进行捕获和处理。

异步函数并发执行

有时候我们需要同时调用多个异步函数并等待它们全部执行完成后再进行处理。在TypeScript中，可以使用Promise.all方法来实现异步函数的并发执行。

下面是一个简单的异步函数并发执行示例：

async function fetchData1() {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    const data = await response.json();

    return data;
}

async function fetchData2() {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/2');
    const data = await response.json();

    return data;
}

async function fetchAllData() {
    const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);

    console.log(data1);
    console.log(data2);
}

fetchAllData();

在上面的示例中，fetchAllData函数同时调用fetchData1和fetchData2函数并等待它们全部执行完成后再打印结果。