如何在TypeScript中使用原生ES6 Promises

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

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

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

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

此外，用户可以在下面的lib属性中添加 ES6。

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

然而，用户也可以使用ECMAScript的后续版本，因为它们支持在TypeScript中使用原生的promise。例如，es7、es10等等。

TypeScript中的原生promise是指在TypeScript代码中使用Promise()构造函数创建的promise。然而，我们可以解决从任何API请求返回的promise。

promise可以有以下三种状态。

• 待定 - 这意味着promise尚未完成。

• 履行 - 这意味着promise已成功完成且没有任何错误。

• 拒绝 - 这意味着promise已经完成但出现了错误。

语法

用户可以按照以下语法使用TypeScript中的原生promise。

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

   // resolve or reject the promise
});
promise
.then(() => {

   // show results
})
.catch(() => {

   // show error
});

在上述的语法中，我们使用Promise()构造函数创建了promise，并在then()和catch()块中处理了结果和错误。此外，“T”代表当promise成功完成时的返回类型。

示例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（链式Promise）

在下面的示例中，我们演示了TypeScript中的链式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代码。解析一个promise

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原生的promise。我们还学会了使用嵌套的promise和promise链。通常，用户将promise作为API的响应获取，并且需要使用then()和catch()块来解决它们。