TypeScript 中的 async/await
在 JavaScript 的异步编程中,回调函数和 Promise 已经成为了两个主要的编程范式,但由于它们在使用时存在一些问题,因此出现了 async/await 这种新的异步编程方式。async/await 不仅可以降低代码的复杂度,还可以使代码更加直观和易于维护。在 TypeScript 中,使用 async/await 也是很常见的,本文将重点介绍 TypeScript 中的 async/await 的相关知识。
- async/await 的用法
在 TypeScript 中,async/await 是通过在函数前面添加 async 关键字来标识的。async 函数可以包含一个或多个 await 表达式,await 表达式会暂停函数的执行,直到一个 Promise 对象的状态变为 resolved。
async function fetchData() { const response = await fetch('https://api.github.com/users/github'); const json = await response.json(); return json; }
在上面的代码中,fetchData 函数返回的是一个 Promise 对象,因为它包含了异步操作。在 fetchData 中,我们使用 await 来等待 fetch 返回的 Promise 对象中的数据,并使用 await 来等待将 JSON 转换为 JavaScript 对象。
除了使用 await 来等待 Promise 的返回值之外,还可以使用 try/catch 包括整个 async 函数体,以捕获错误。例如:
async function fetchData() { try { const response = await fetch('https://api.github.com/users/github'); const json = await response.json(); return json; } catch (error) { console.log(error); } }
- Promise 类型的使用
在 TypeScript 中,Promise 是一个内置的泛型类型,泛型参数用于指定 Promise 对象的返回值类型。例如,createUser 函数返回的是一个 Promise 对象。
interface User { id: number; name: string; }
function createUser(user: User): Promise { return new Promise((resolve, reject) => { // 创建用户 if (user) { resolve(user); } else { reject('Unable to create user.'); } }); }
然后,我们可以使用 async/await 来等待 Promise 对象的状态变为 resolved。
async function createUserAsync(user: User) { try { const response = await createUser(user); console.log(response); } catch (error) { console.log(error); } }
在上面的代码中,createUserAsync 函数通过调用 createUser 函数获取了返回值,并将返回值打印到控制台中。
- async/await 和 Promise 的混合使用
在 TypeScript 中,async/await 与 Promise 可以混合使用,例如在 fetchData 函数中,我们可以使用 fetch API 返回的 Promise 对象:
async function fetchData() { const response = await fetch('https://api.github.com/users/github'); const json = await response.json(); return json; }
而在 createNewUser 函数中,我们可以使用 Promise 对象:
async function createNewUser(user: User) { return new Promise((resolve, reject) => { // 创建新用户 if (user) { resolve(user); } else { reject('Unable to create user.'); } }); }
因此,根据需要选择合适的方法,更好地应对不同的异步编程场景。
- 总结
在 TypeScript 中使用 async/await 可以使异步编程更加直观和易于维护。通过使用 async/await 和 Promise,我们可以轻松地进行异步编程,避免了回调地狱、可读性低等问题。在实际开发中,可以根据编程需求选择合适的异步编程方法,更加高效地完成项目。
参考:
[1] Promises, async/await
[2] TypeScript Handbook - Async Functions
[3] TypeScript Async-Await Example Tutorial.
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/645c33ca968c7c53b0e77c5a