TypeScript 下的 Promise 和 async/await-JavaScript中文网-JavaScript教程资源分享门户

前言

在现代的前端开发中，异步编程是不可避免的。Promise 和 async/await 是现代 JavaScript 中最常用的两种异步编程方式。TypeScript 是一种强类型的 JavaScript 超集，它提供了许多优秀的功能，包括类型检查、面向对象编程、ES6+的语法支持等。在 TypeScript 中使用 Promise 和 async/await 可以让我们更加方便地进行异步编程。

Promise

Promise 是一种异步编程模型，它可以在异步操作完成时返回一个结果或错误。Promise 可以链式调用，使得异步操作的代码更加清晰易读。在 TypeScript 中，Promise 是一个泛型类，它需要一个类型参数来指定异步操作返回的结果类型。

创建 Promise

创建一个 Promise 非常简单，只需要调用 Promise 构造函数，并传入一个执行器函数。执行器函数接受两个参数：resolve 和 reject。当异步操作完成时，调用 resolve 函数返回结果，调用 reject 函数返回错误信息。

const promise = new Promise<string>((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello, TypeScript!');
  }, 1000);
});

Promise 链式调用

Promise 链式调用是 Promise 最常用的方式之一。通过 then 方法，我们可以在 Promise 完成时执行一个回调函数，并返回一个新的 Promise 对象。这个新的 Promise 对象可以在下一个 then 方法中继续链式调用。

promise
  .then((result) => {
    console.log(result); // Hello, TypeScript!
    return result.length;
  })
  .then((length) => {
    console.log(length); // 17
  });

Promise.all 和 Promise.race

Promise.all 和 Promise.race 是 Promise 中两个非常实用的静态方法。Promise.all 方法接受一个 Promise 数组作为参数，并在所有 Promise 都完成时返回一个结果数组。Promise.race 方法接受一个 Promise 数组作为参数，并在其中任意一个 Promise 完成时返回该 Promise 的结果或错误。

// javascriptcn.com 代码示例
const promise1 = Promise.resolve('Hello');
const promise2 = Promise.resolve('TypeScript');
const promise3 = Promise.reject(new Error('Error'));

Promise.all([promise1, promise2])
  .then((results) => {
    console.log(results); // ['Hello', 'TypeScript']
  })
  .catch((error) => {
    console.error(error);
  });

Promise.race([promise1, promise3])
  .then((result) => {
    console.log(result); // Hello
  })
  .catch((error) => {
    console.error(error); // Error: Error
  });

async/await

async/await 是 ES2017 中引入的一种异步编程模型，它可以让异步代码看起来像同步代码，使得代码更加易读易写。在 TypeScript 中，async/await 是基于 Promise 实现的，因此使用 async/await 也需要对 Promise 有一定的了解。

使用 async/await

使用 async/await 时，我们需要在异步函数前面加上 async 关键字。异步函数中可以使用 await 关键字等待一个异步操作完成并返回结果。如果异步操作出错，可以使用 try/catch 语句捕获错误。

// javascriptcn.com 代码示例
async function getMessage(): Promise<string> {
  const message = await promise;
  return message;
}

getMessage()
  .then((message) => {
    console.log(message); // Hello, TypeScript!
  })
  .catch((error) => {
    console.error(error);
  });

async/await 和 Promise 链式调用的比较

使用 async/await 可以让异步代码看起来更加像同步代码，使得代码更加易读易写。但是在某些情况下，使用 Promise 链式调用可能更加灵活。例如，当我们需要在多个异步操作中间进行一些处理时，使用 Promise 链式调用可能更加方便。

// javascriptcn.com 代码示例
promise
  .then((result) => {
    console.log(result); // Hello, TypeScript!
    return result.length;
  })
  .then((length) => {
    console.log(length); // 17
    return length.toString();
  })
  .then((string) => {
    console.log(string); // '17'
  })
  .catch((error) => {
    console.error(error);
  });

// javascriptcn.com 代码示例
async function getMessageLength(): Promise<number> {
  const message = await promise;
  const length = message.length;
  return length;
}

async function getLengthString(): Promise<string> {
  const length = await getMessageLength();
  const string = length.toString();
  return string;
}

getLengthString()
  .then((string) => {
    console.log(string); // '17'
  })
  .catch((error) => {
    console.error(error);
  });

总结

Promise 和 async/await 是现代 JavaScript 中最常用的两种异步编程方式。在 TypeScript 中使用 Promise 和 async/await 可以让我们更加方便地进行异步编程。Promise 和 async/await 都有自己的优点和适用场景，我们可以根据具体的需求选择合适的方式。异步编程是前端开发中非常重要的一个方面，掌握 Promise 和 async/await 可以让我们更加高效地进行开发。

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