如何在原生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中文網其他相關文章！