如何在原生ES6 Promises中使用TypeScript？

---

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

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

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

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

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

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

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

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

promises可以具有以下三种状态。

• 等待中 – 表示promise尚未完成。

• 已完成 – 表示promise已成功完成，没有任何错误。

• 已拒绝 – 表示promise已完成并出现错误。

语法

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

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（基本Promises）

在下面的示例中，我们将学习在TypeScript中使用ES6原生promises的基本方法。我们创建了两个名为first_promise和second_promise的promises。我们已完成first_promise并拒绝了second_promise。

此外，用户可以看到promises的返回类型是字符串。由于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（嵌套Promises）

在下面的示例中，我们演示了如何使用嵌套promises。我们使用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中的链式promise。顾名思义，它是一系列promises。在这里，我们完成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原生promises。我们还学习了如何使用嵌套promises和promise链。通常，用户会将promises作为API的响应，他们需要使用then()和catch()块来解决它们。