TypeScript 中使用 Promise 的指南-JavaScript中文网-JavaScript教程资源分享门户

Promise 是 JavaScript 中一种强大的异步编程解决方案，在 TypeScript 中也得到了广泛的应用。本文将介绍 TypeScript 中如何使用 Promise，并提供具体的示例代码，帮助读者更好地理解 Promise 的学习与应用。

Promise 简介

Promise 是一种异步编程解决方案，是 JavaScript 中非常常用的 API。Promise 可以解决回调函数带来的层层嵌套的问题，使代码更加清晰易读，并且可以支持多个异步操作的协同执行。

Promise 有三种状态，分别为 Pending（等待状态）、Resolved（已完成状态）、Rejected（已失败状态）。当一个 Promise 被创建时，它处于 Pending 状态，表示异步操作正在执行中。当异步操作执行成功时，Promise 会从 Pending 转化为 Resolved 状态，并传递一个结果值。当异步操作执行失败时，Promise 会从 Pending 转化为 Rejected 状态，并传递一个错误值。

TypeScript 中使用 Promise

在 TypeScript 中使用 Promise，需要使用泛型来指定 resolve() 函数的结果类型和 reject() 函数的错误类型，例如：

// javascriptcn.com 代码示例
const promise: Promise<number> = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(42);
  }, 1000);
});

promise.then(result => {
  console.log(result); // 42
});

上面的代码中，Promise 的结果类型为 number，表示 resolve() 函数返回的结果是一个数字类型。然后使用 then() 方法来监听 resolve() 函数的执行结果，并输出结果到控制台。

在 TypeScript 中还可以使用 async/await 来处理 Promise，例如：

// javascriptcn.com 代码示例
const getResult = async (): Promise<number> => {
  const result = await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(42);
    }, 1000);
  });

  return result;
};

getResult().then(result => {
  console.log(result); // 42
});

上面的代码中，定义了一个 getResult() 函数，使用 async/await 来延迟执行 Promise，并返回结果。该函数的返回结果类型为 Promise<number>，表示返回的结果是一个数字类型的 Promise。然后使用 then() 方法来监听返回的结果，并输出结果到控制台。

Promise 链式调用

在实际应用中，我们经常需要执行多个异步操作，并等待它们全部完成之后再进行下一步操作，这时就需要使用 Promise 链式调用的方式来实现。

例如，我们需要先读取一个文件，然后上传到服务器，最后返回上传成功的结果：

// javascriptcn.com 代码示例
const readFile = (filename: string): Promise<string> => {
  return new Promise((resolve, reject) => {
    fs.readFile(filename, (err, data) => {
      if (err) {
        reject(err);
      } else {
        resolve(data.toString());
      }
    });
  });
};

const uploadFile = (data: any): Promise<any> => {
  return new Promise((resolve, reject) => {
    http.post("/upload", data, (err, res) => {
      if (err) {
        reject(err);
      } else {
        resolve(res.data);
      }
    });
  });
};

readFile("./file.txt")
  .then(data => {
    return uploadFile(data);
  })
  .then(result => {
    console.log(result);
  })
  .catch(err => {
    console.error(err);
  });

上面的代码中，先定义了一个 readFile() 函数，用于读取指定的文件，并返回 Promise 对象。然后定义了一个 uploadFile() 函数，用于上传读取到的文件数据，并返回 Promise 对象。最后使用 Promise 链式调用的方式来顺序执行两个异步操作，并捕获错误。

Promise 并行调用

有些情况下，我们需要同时执行多个异步操作，并等待它们全部完成之后再进行下一步操作，这时就需要使用 Promise 并行调用的方式来实现。

例如，我们需要同时发送多个请求，并等待它们全部返回结果：

// javascriptcn.com 代码示例
const request = (url: string): Promise<any> => {
  return new Promise((resolve, reject) => {
    http.get(url, (err, res) => {
      if (err) {
        reject(err);
      } else {
        resolve(res.data);
      }
    });
  });
};

const urls = ["https://api.example.com/1", "https://api.example.com/2", "https://api.example.com/3"];

Promise.all(urls.map(url => request(url)))
  .then(results => {
    console.log(results);
  })
  .catch(err => {
    console.error(err);
  });

上面的代码中，先定义了一个 request() 函数，用于发送指定的请求并返回 Promise 对象。然后定义了一个数组 urls，其中包含了多个请求地址。最后使用 Promise.all() 方法来并行执行所有的请求，并等待它们全部返回结果。

总结

本文介绍了 TypeScript 中的 Promise 的使用方法，并提供了详细的示例代码。通过对 Promise 的深入学习和应用，可以帮助开发者更好地处理异步操作，提高代码的可读性和可维护性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64fad3e3f6b2d6eab319fb33