前端面试题110（在TypeScript项目中，如何处理异步操作和Promise类型的？请讲解一些处理异步操作的最佳实践）

在TypeScript项目中处理异步操作和Promise类型是十分常见的需求，尤其是在进行网络请求、文件读写等IO操作时。TypeScript原生支持ES6的Promise，并在此基础上引入了async/await语法糖，使得异步代码更加易于理解和维护。下面我会通过几个方面来介绍处理异步操作的最佳实践：

1. 使用async/await

async/await 是处理异步操作的一个强大工具，它能让异步代码看起来像同步代码一样直观。一个函数如果被标记为async，那么它会隐式地返回一个Promise，并且可以在该函数体内使用await关键字等待Promise的结果。

示例代码：

async function fetchData(url: string): Promise<string> {
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return await response.text();
    } catch (error) {
        console.error('Fetch data error:', error);
        throw error;
    }
}

// 调用示例
fetchData('https://api.example.com/data')
    .then(data => console.log(data))
    .catch(error => console.error('Error fetching data:', error));

2. 错误处理

• 统一错误处理：在async函数中使用try/catch块捕获错误，并在必要时重新抛出，或者在外层通过.catch()处理Promise的拒绝状态。
• 避免静默失败：确保所有可能出错的地方都有相应的错误处理逻辑，避免错误被忽略。

3. 避免Promise地狱

当多个异步操作需要顺序执行或有依赖关系时，过度嵌套的Promise链（即“Promise地狱”）会使代码难以阅读和维护。使用async/await可以有效解决这一问题。

改进前：

fetchData(url1)
    .then(data1 => fetchMoreData(data1))
    .then(data2 => console.log(data2))
    .catch(error => console.error(error));

改进后：

async function fetchDataSequentially(url1: string, url2: string) {
    try {
        const data1 = await fetchData(url1);
        const data2 = await fetchMoreData(data1);
        console.log(data2);
    } catch (error) {
        console.error('Sequential fetch error:', error);
    }
}

4. 并行执行异步操作

如果有多个独立的异步操作需要同时执行，可以使用Promise.all()来并行执行它们，并在所有操作都完成时获取结果。

async function parallelFetch(urls: string[]) {
    try {
        const responses = await Promise.all(urls.map(url => fetch(url)));
        const texts = await Promise.all(responses.map(r => r.text()));
        return texts;
    } catch (error) {
        console.error('Parallel fetch error:', error);
        throw error;
    }
}

5. 使用finally

无论Promise是resolve还是reject，都可以使用.finally()来执行清理工作，比如关闭数据库连接、释放资源等。

fetchData()
    .then(data => console.log(data))
    .catch(error => console.error(error))
    .finally(() => console.log('Request completed'));

总结

通过上述实践，你可以更高效、安全地在TypeScript项目中处理异步操作和Promise。记住，清晰的错误处理、避免过度嵌套、合理利用async/await以及并行处理能力，都是提高代码可读性和可维护性的关键。