如何使用原生 ES6 Promises 的 Typescript?

typescriptjavascriptweb development更新于 2025/2/24 20:28:17

在 ES6 版本的 ECMAScript 中，首次引入了 Promises。

要在 TypeScript 项目中使用 ES6 Promises，用户需要修改 tsconfig.json 文件。

在'compilerOptions'对象中添加以下代码。

{
    "compilerOptions": {
    "target": "es6",
    }
}

此外，用户可以在'lib'属性中添加'ES6'，如下所示。

{
   "compilerOptions": {
      "lib": [
         "es6",
         "dom"
      ],
   }
}

但是，用户也可以使用更高版本的 ECMAScript，因为它们支持 TypeScript 中的原生承诺。例如，es7、es10 等。

TypeScript 中的原生承诺是指由 TypeScript 代码中的 Promise() 构造函数创建的承诺。但是，我们可以解析从任何 API 请求返回的承诺。

承诺可以有以下三种状态。

Pending– 表示承诺尚未完成。
Fulfilled– 表示承诺已成功完成且没有任何错误。
Rejected– 表示承诺已完成但有错误。

语法

用户可以按照以下语法在 TypeScript 中使用原生承诺。

const promise = new Promise((resolve, rejection) => {

// 解决或拒绝承诺
});
promise
.then(() => {

// 显示结果
})
.catch(() => {

// 显示错误
});

在上述语法中，我们使用 Promise() 构造函数创建了承诺，并分别在 then() 和 catch() 块中处理结果和错误。此外，"T"表示承诺成功实现时的返回类型。

示例 1(基本 Promise)

在下面的示例中，我们将学习 TypeScript 中 ES6 原生 Promise 的基本用法。我们创建了两个名为 first_promise 和 second_promise 的 Promise。我们解析了 first_promise 并拒绝了 second_promise。

此外，用户可以看到 Promise 的返回类型是字符串。当 first_promise 成功解析时，执行控制权转到 then() 块，而当 second_promise 被拒绝时，执行控制权转到 catch() 块。

// resolving a promise
const first_promise = new Promise((res, rej) => {
   res("First promise resolved");
});
first_promise
.then((result: string) => {
   console.log(result);
})
.catch((err) => {
   console.log(err);
});
// rejecting a promise
const second_promise = new Promise((res, rej) => {
   rej("Second promise rejected");
});
second_promise
.then((result: string) => {
   console.log(result);
})
.catch((err) => {
   console.log(err);
});

编译后，它将生成以下 JavaScript 代码。

// resolving a promise
var first_promise = new Promise(function (res, rej) {
   res("First promise resolved");
});
first_promise
.then(function (result) {
   console.log(result);
})["catch"](function (err) { 
   console.log(err);
});

// rejecting a promise
var second_promise = new Promise(function (res, rej) {
   rej("Second promise rejected");
});
second_promise
.then(function (result) {
   console.log(result);
})["catch"](function (err) {
   console.log(err);
});

示例 2(嵌套 Promise)

在下面的示例中，我们演示了如何使用嵌套 Promise。我们使用 new 关键字和 Promise() 构造函数创建了 outer_promise。在 outer_promise 的回调函数中，我们创建了新的子 Promise 并解析了子 Promise。

在输出中，用户可以观察到 outer_promise 已成功解析为子 Promise。如果我们拒绝子 Promise，outer_promise 也会被拒绝。

// resolving a promise
const outer_promise = new Promise((res) => {
   res(
      new Promise((resChild) => {
         resChild("Child Promise Resolved");
      })
   );
});
outer_promise
.then((result: string) => {
      console.log(result);
})
.catch((err) => {
   console.log(err);
});

编译后，它将生成以下 JavaScript 代码。

// resolving a promise
var outer_promise = new Promise(function (res) {
   res(new Promise(function (resChild) {
      resChild("Child Promise Resolved");
   }));
});
outer_promise
.then(function (result) {
   console.log(result);
})["catch"](function (err) {
   console.log(err);
});

示例 3(链式 Promises)

在下面的示例中，我们演示了 TypeScript 中的 chined promise。顾名思义，它是一连串的 promise。在这里，我们在解析 numeric_promise 时返回数值。

我们在 then() 块中收到 10 作为结果。之后，我们将结果乘以 2 并返回。我们可以在第二个 then() 块中从第一个 then() 块获取返回值，依此类推。如果发生任何错误，控制权将直接转到 catch() 块。

在输出中，用户可以观察到结果值在每个 then() 块中都翻倍了。

// resolving a promise
const numeric_promise = new Promise((res) => {
   res(10);
});
numeric_promise
.then((result: number) => {
   console.log("The result in the first then() block is - " + result);
   return result * 2;
})
.then((result: number) => {
   console.log("The result in the second then() block is - " + result);
   return result * 2;
})
.then((result: number) => {
   console.log("The result in the third then() block is - " + result);
   return result * 2;
})
.then((result: number) => {
   console.log("The result in the fourth then() block is - " + result);
})
.catch((err) => {
   console.log(err);
});

编译后，它将生成以下 JavaScript 代码。解决一个承诺

var numeric_promise = new Promise(function (res) {
   res(10);
});
numeric_promise
.then(function (result) {
   console.log("The result in the first then() block is - " + result);
   return result * 2;
})
.then(function (result) {
   console.log("The result in the second then() block is - " + result);
   return result * 2;
})
.then(function (result) {
   console.log("The result in the third then() block is - " + result);
   return result * 2;
})
.then(function (result) {
   console.log("The result in the fourth then() block is - " + result);
})["catch"](function (err) {
   console.log(err);
});

用户学习了在 TypeScript 中使用 ES6 原生承诺。我们还学习了使用嵌套承诺和承诺链。通常，用户将承诺作为 API 的响应，他们需要使用 then() 和 catch() 块来解决它们。