当前位置：首页 > news >正文

使用 TypeScript 改进异步操作和错误处理的策略

news 来源：原创 2024/5/8 19:45:40

使用 TypeScript 改进异步操作和错误处理的策略

处理异步代码是 JavaScript 应用程序的主要内容。TypeScript 为异步操作带来类型安全，增强可预测性并减少运行时错误。本文旨在探索我们可以利用的模式来有效地管理异步操作和错误处理。

Async/Await

Async/await 语法使代码更清晰、更易读，与同步执行非常相似。TypeScript 的类型推断与此一致，确保在编译时检查变量和返回类型，从而减少可能的运行时错误。

async function fetchData(url: string): Promise<string> {try {const response = await fetch(url);if (!response.ok) {throw new Error(`Error: ${response.statusText}`);}return await response.text();} catch (error: unknown) {// 保留堆栈跟踪throw error instanceof Error ? error : new Error("Unexpected error");}
}

Promise：确保异步操作中的类型安全

TypeScript 通过对解析值和可能发生的任何错误强制执行类型来改进Promise 。这种编译时类型检查会导致异步操作中的输出更加可预测，从而显着降低意外运行时错误的风险。

const taskResult: Promise<string> = new Promise((resolve, reject) => {const someCondition = true;if (someCondition) {resolve("Success!");} else {// TypeScript 确保这是一个 Error 对象reject(new Error("Failure"));}
});

此示例演示了 TypeScript 确保检查错误对象类型的能力，从而实现细粒度和弹性的错误处理。

增强的泛型和错误处理

TypeScript 中的泛型增强了函数灵活性，同时保持了类型安全。考虑一个获取不同类型内容的异步函数。泛型允许该函数清楚地定义其返回类型，确保编译时类型安全。

enum ResponseKind {Article = "article",Comment = "comment",Error = "error",
}type ArticleResponse = {kind: ResponseKind.Article;title: string;content: string;
};type CommentResponse = {kind: ResponseKind.Comment;content: string;
};type ErrorResponse = {kind: ResponseKind.Error;message: string;
};// 使用可区分联合来定义响应类型
type ContentResponse = ArticleResponse | CommentResponse | ErrorResponse;async function getContent<T extends ContentResponse>(contentId: string
): Promise<Exclude<T, ErrorResponse>> {const response: ContentResponse = await fetchContent(contentId);if (response.kind === ResponseKind.Error) {throw new Error(response.message);}return response as Exclude<T, ErrorResponse>;
}// 将 getContent 函数与类型断言一起使用，
// 强化我们的预期返回类型，以实现更可预测的行为和类型安全。
async function displayContent(contentId: string) {try {// 这里我们断言响应的类型为 ArticleResponseconst article = await getContent<ArticleResponse>(contentId);// 对“title”属性的类型安全访问console.log(article.title);} catch (error) {console.error(error);}
}

上面的函数getContent说明了如何使用泛型在编译时实现类型安全，确保我们正确处理各种内容类型。这种方法显着降低了运行时错误的可能性。

此外，我们利用Exclude来确保getContent不返回ErrorResponse，这是 TypeScript 的类型系统如何通过设计防止某些类运行时错误的示例。

尽管 TypeScript 有强大的编译时检查，但有些错误本质上是运行时的，需要显式处理。接下来，我们将了解自定义错误处理如何充当那些无法通过编译时检查的错误的请求。

继续我们的类型安全数据获取实践，针对运行时错误制定稳健的策略至关重要。下面对自定义错误类的介绍提供了有效区分和处理此类错误的详细方法。

class BadRequestError extends Error {public statusCode: number;constructor(message: string, statusCode = 400) {super(message);this.name = "BadRequestError";// 错误请求的默认 HTTP 400 状态代码this.statusCode = statusCode;}
}type UserData = {name: string;
};
async function submitUserData(userData: UserData): Promise<void> {try {// 数据提交validateUserData(userData);} catch (error) {// 处理错误请求错误if (error instanceof BadRequestError) {console.error(`Validation failed: ${error.message}`);// 处理意外错误} else {console.error(`Unexpected error: ${error.message}`);}// 如果想从更高层的调用函数访问错误，则重新抛出错误throw error;}
}function validateUserData<T extends UserData>(data: T): void {if (!data.name) {throw new BadRequestError("Name is required");}
}

通过自定义错误类，我们可以以精细的方式处理异常，补充泛型提供的编译时类型安全性。通过结合这些策略，我们创建了一个弹性系统，在编译时和运行时维护类型安全，为我们的 TypeScript 应用程序提供全面的错误处理。

结果类型的替代错误处理

在处理异步操作时，函数式编程风格可能特别有用。Result类型或者Either模式提供了传统错误处理的结构化替代方案。这种方法将错误视为数据，将它们封装在可以通过异步流轻松传播的结果类型中。

type Success<T> = { kind: 'success', value: T };
type Failure<E> = { kind: 'failure', error: E };
type Result<T, E = Error> = Success<T> | Failure<E>;
type AsyncResult<T, E = Error> = Promise<Result<T, E>>;async function asyncComplexOperation(): AsyncResult<number> {try {// 异步逻辑const value = await someAsyncTask();return { kind: 'success', value };} catch (error) {return {kind: 'failure',error: error instanceof Error ? error : new Error('Unknown error'),};}
}

异步操作中的结构化错误处理

对于更复杂的异步应用程序，我们可能希望使用错误边界类型来处理更高级别的错误。此模式旨在与 async/await 语法很好地配合使用，允许干净且可预测地捕获错误并处理上游。

type ErrorBoundary<T, E extends Error> = {status: 'success';data: T;
} | {status: 'error';error: E;
};async function asyncHandleError<T>(fn: () => Promise<T>,createError: (message?: string) => Error
): Promise<ErrorBoundary<T, Error>> {try {const data = await fn();return { status: 'success', data };} catch (error) {const errorMessage = error instanceof Error ? error.message : 'Unknown error';return {status: 'error',error: createError(errorMessage)};}
}async function riskyAsyncOperation(): Promise<string> {const someCondition = false;if (someCondition) {throw new Error('Failure');}return 'Success';
}async function handleOperation() {const result = await asyncHandleError(riskyAsyncOperation, (message) => new Error(message));if (result.status === 'success') {console.log(result.data); } else {console.error(result.error.message);}
}handleOperation();