在 TypeScript 中使用 ES6 Promise：完美指南-JavaScript中文网-JavaScript教程资源分享门户

在 TypeScript 中使用 ES6 Promise：完美指南

ES6 Promise 是 JavaScript 中非常强大的异步编程模型，可以方便地解决异步回调地狱的问题，使代码更加简洁易读。而在 TypeScript 中使用 ES6 Promise，可以更好地进行类型检查，提高代码可维护性。

本文将介绍如何在 TypeScript 中使用 ES6 Promise，包括 Promise 的基础使用、Promise 的链式调用、Promise 的捕获异常和错误处理等方面。

Promise 的基础使用

Promise 是一个异步编程模型，表示一个异步操作的最终完成（或失败）及其结果值。Promise 有三种状态：pending、fulfilled 和 rejected。

在 TypeScript 中，定义一个 Promise 时需要指定它返回值的类型。举个例子：

function getUser(userId: number): Promise<User> {
  return new Promise((resolve, reject) => {
    // 异步获取用户信息
    setTimeout(() => {
      const user: User = { id: userId, name: 'John' };
      resolve(user);
    }, 1000);
  });
}

在上面的代码中，我们使用 Promise 包装了一个异步操作，返回值类型为 Promise<User>。在异步操作完成后，通过 resolve 方法传递异步操作的结果。

使用上述方法可以在 TypeScript 中使用 ES6 Promise，但是还有更加方便的写法。

Promise 的链式调用

Promise 的链式调用可以方便地创建一系列异步操作，将回调地狱的代码变得更加简洁易读。例如：

getUser(1)
  .then(user => {
    console.log(user);  // User { id: 1, name: 'John' }
    return getAccount(user.id);
  })
  .then(account => {
    console.log(account);  // Account { id: 101, balance: 1000 }
    return transferMoney(account.id, 102, 500);
  })
  .then(response => {
    console.log(response);  // TransferResponse { status: 'success' }
  })
  .catch(error => {
    console.error(error);
  });

上述代码使用了 Promise 的链式调用方式，在 then 函数中再次返回一个 Promise。如果前一个 Promise 成功了，后面的 Promise 才能继续执行。当其中任何一个 Promise 错误时，整个操作链就会中断，执行 catch 函数。

在 TypeScript 中，可以指定 then 函数的参数类型，例如：

getUser(1)
  .then((user: User) => {
    console.log(user);  // User { id: 1, name: 'John' }
    return getAccount(user.id);
  })
  .then((account: Account) => {
    console.log(account);  // Account { id: 101, balance: 1000 }
    return transferMoney(account.id, 102, 500);
  })
  .then((response: TransferResponse) => {
    console.log(response);  // TransferResponse { status: 'success' }
  })
  .catch((error: Error) => {
    console.error(error);
  });

使用 Promise 可以将异步操作变得简单易懂，不再需要嵌套回调函数，同时也可以更好地进行类型检查。

Promise 的捕获异常和错误处理

Promise 的异常是可以被捕获的，如果 Promise 被拒绝时可以使用 catch 函数来处理异常并返回默认值。例如：

function getAccount(userId: number): Promise<Account> {
  return new Promise((resolve, reject) => {
    // 请求接口获取账户信息
    setTimeout(() => {
      if (Math.random() < 0.5) {
        const account: Account = { id: 101, balance: 1000 };
        resolve(account);
      } else {
        reject('Get account failed.');
      }
    }, 1000);
  });
}

getUser(1)
  .then((user: User) => {
    console.log(user);
    return getAccount(user.id);
  })
  .then((account: Account) => {
    console.log(account);
    return transferMoney(account.id, 102, 500);
  })
  .then((response: TransferResponse) => {
    console.log(response);
  })
  .catch((error: any) => {
    console.error(error);
    return { status: 'failed' };
  })
  .then((response: any) => {
    console.log(response);  // { status: 'failed' }
  });

上述代码中，当获取账户信息失败时，Promise 被拒绝（rejected），被 catch 函数捕获到并返回默认值 { status: 'failed' }。

除了使用 catch 函数来处理异常，还可以使用 finally 函数来处理完整个操作链时的逻辑。例如：

getUser(1)
  .then((user: User) => {
    console.log(user);
    return getAccount(user.id);
  })
  .then((account: Account) => {
    console.log(account);
    return transferMoney(account.id, 102, 500);
  })
  .then((response: TransferResponse) => {
    console.log(response);
  })
  .catch((error: any) => {
    console.error(error);
    return { status: 'failed' };
  })
  .finally(() => {
    console.log('Operation finished.');
  });

上述代码中，无论操作链是否成功，最终都会执行 finally 函数中的代码。

总结

本文介绍了在 TypeScript 中使用 ES6 Promise 的完美指南，包括 Promise 的基础使用、Promise 的链式调用、Promise 的捕获异常和错误处理等方面。使用 Promise 可以大幅度提高异步编程的效率和可读性，同时也可以使代码更加类型安全、易于维护。

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

在 TypeScript 中使用 ES6 Promise：完美指南

纠错反馈