如何使用原生 ES6 Promises 的 Typescript?
在 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() 块来解决它们。
