如何在原生ES6 Promise中使用Typescript？-js教程-PHP中文网

如何在原生ES6 Promise中使用Typescript？

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

To use the ES6 promises in the TypeScript project, users need to modify the tsconfig.json file.

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

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

登录后复制

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

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

登录后复制

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

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

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

待定 - 这意味着承诺尚未完成。
已完成 - 这意味着承诺已经成功地完成，没有任何错误。
被拒绝 - 这意味着承诺以错误完成。

语法

用户可以按照以下语法在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（基本承诺）

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

此外，用户可以看到承诺的返回类型是字符串。当第一个承诺成功解决时，执行控制转到 then() 代码块；当第二个承诺被拒绝时，执行控制转到 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);
});

登录后复制

Example 2 (Nested Promises)

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

在输出中，用户可以观察到outer_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);
});

登录后复制

Example 3 (Chained Promises)

的中文翻译为：

示例3（链式Promise）

在下面的示例中，我们展示了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代码。解决一个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()块来处理它们。

以上是如何在原生ES6 Promise中使用Typescript？的详细内容。更多信息请关注PHP中文网其他相关文章！