TypeScript 中的 Promise 和 Async/Await 使用方式-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们常常会使用异步操作来处理一些耗时的操作，例如向服务器请求数据、读取本地文件等等。为了更好地管理异步操作，JavaScript 引入了 Promise 和 Async/Await。

TypeScript 是一门 strongly typed 的语言，它可以为 Promise 和 Async/Await 提供更好的类型安全支持。本文将详细介绍 TypeScript 中 Promise 和 Async/Await 的使用方式，并给出实际的代码示例。

Promise 的使用

Promise 是一种异步编程的解决方案，它可以避免回调地狱的问题。一个 Promise 对象代表一个异步操作的最终完成或失败，并返回一个值或错误。

下面是一个使用 Promise 的简单示例：

// javascriptcn.com 代码示例
function fetchData(): Promise<string> {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched successfully');
    }, 2000);
  });
}

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

上面的代码中，我们创建了一个 fetchData 函数，它返回一个 Promise。我们使用 setTimeout 模拟了一个异步操作，2 秒后 resolve 返回成功的结果。然后我们使用 then 方法来处理返回的成功结果，catch 方法来处理错误。

在 TypeScript 中，我们可以使用泛型来指定 Promise 返回的类型，如上面代码中的 Promise。

Async/Await 的使用

Async/Await 是 ECMAScript 2017 中新增的语法糖，它可以让异步操作看起来像同步操作，使代码更加简洁易读。

下面是一个使用 Async/Await 的示例：

// javascriptcn.com 代码示例
function fetchData(): Promise<string> {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched successfully');
    }, 2000);
  });
}

async function printData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

printData();

上面的代码中，我们定义了一个 async 函数 printData，并在函数内部使用 await 关键字来等待 fetchData 函数返回结果。async 函数返回一个 Promise，当 async 函数执行完毕后，Promise 解决为 async 函数的返回值。

与 Promise 一样，Async 函数也可以使用 try/catch 来处理错误。

Promise 和 Async/Await 的混合使用

在 TypeScript 中，Promise 和 Async/Await 是可以混合使用的，我们可以使用 async 函数来包装 Promise 对象，也可以在 Promise 中使用 Async/Await。

下面是一个混合使用的示例：

// javascriptcn.com 代码示例
function fetchData(): Promise<string> {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched successfully');
    }, 2000);
  });
}

async function printData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

function fetchDataAndPrintData() {
  printData();
}

fetchDataAndPrintData();

上面的代码中，我们定义了一个 fetchDataAndPrintData 函数，并在函数内部调用 printData 函数。printData 函数中使用 Async/Await 来等待 fetchData 函数返回结果。

总结

本文详细介绍了 TypeScript 中 Promise 和 Async/Await 的使用方式，并给出了实际的代码示例。在日常开发中，我们可以根据实际情况选择使用 Promise 还是 Async/Await，也可以混合使用两种方式，使代码更加简洁易读，更加类型安全。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654623d27d4982a6ebfefda0