在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成功完成時的回傳類型。
在下面的範例中，我們將學習在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);
});
在下面的範例中，我們示範如何使用巢狀的 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);
});
在下面的範例中，我們展示了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中文網其他相關文章！
