JavaScript 中的 Promise 鍊是什麼？-js教程-PHP中文網

如何在 JavaScript 中宣告 Promise？

範例 3

什麼是承諾鏈？

首頁

web前端

js教程

JavaScript 中的 Promise 鍊是什麼？

王林

Sep 08, 2023 pm 03:45 PM

JavaScript 中的 Promise 链是什么？

在本教學中，我們將討論 JavaScript 中的 Promise 鏈。在轉向 Promise 鏈之前，我們先來談談什麼是 Promise

因此，我們知道 JavaScript 是單線程的，這意味著不允許兩個函數同時運行，因為我們只有一個調用堆疊，如下所示，它有一個要執行的函數

當一個函數完成執行時，另一個函數開始執行，因此為了實現兩個或多個函數同時運行，我們在JavaScript 範例中使用非同步程式設計- setTimeout 函數，它接受一個回呼函數和指定的時間，之後它將執行執行該函數。

setTimeout(function cT(){
   console.log("I am here after 5 seconds")
}, 5000);

登入後複製

因此，我們對非同步操作使用 Promise，它給出非同步操作的結果及其完成或失敗。

就像在現實生活中一樣，我們以與做出承諾相同的方式承諾完成任何工作，並且它存在於三種狀態之一。

待處理 - 這代表初始狀態，表示它既未完成也未拒絕。
Fulfilled - 這表示我們指派的操作已成功完成。
拒絕 - 此狀態表示操作無法執行，它被拒絕。

非同步方法傳回一個值，但它不會傳回最終值，而是傳回一個將來為該函數提供值的承諾。

我們在 Promise 語句之後使用 then() 方法執行 Promise，如果由於某些錯誤而被拒絕，則將使用 catch 區塊進行處理。

如何在 JavaScript 中宣告 Promise？

let promise = new Promise(function (resolve, reject) {
   return resolve("Hello I am resolved");
});

登入後複製

這裡的promise內部有一個函數，稱為回調函數，它有一個參數作為兩個方法resolve()和reject()，正如我們已經知道的那樣從上面關於兩者的解釋來看。

因此，這裡的resolve確保我們給出的函數的成功完成，而reject將確保它對給定的可執行回調函數不成功完成的責任。

範例 1

讓我們看看使用 Set 來尋找字串中唯一字元的程式。

<!DOCTYPE html>
<html>
<head>
   <title>Promise chaining in JavaScript</title>
</head>
<body>
   <h3> Execute a Promise we receive</h3>
   <p id ="result"></p>
   <script>
      let promise = new Promise(function (resolve, reject) {
         return resolve("Hello I am resolved");
      });
      promise.then(function(value) {
         console.log(value);
         document.getElementById("result").innerHTML += value;
      })
   </script>
</body>
</html>

登入後複製

在上面裡面。 then() 方法會傳遞一個回呼函數，value 變數負責印出來自resolve() 方法的結果。

什麼是承諾鏈？

Promise 鏈基本上是多個非同步函數調用，並以同步方式依次執行它們。 then() 方法。

範例 2

讓我們透過一個例子來詳細理解。

<!DOCTYPE html>
<html>
<head>
   <title>Promise chaining in JavaScript </title>
</head>
<body>
   <h3> Promise Chaining</h3>
   <p id ="result"></p>
   <script>
      let promise = new Promise(function (resolve, reject) {
         return resolve(10);
      });
      promise.then(function(firstPromise_val) {
         alert(firstPromise_val)
         document.getElementById("result").innerHTML += "First Promise val: "+firstPromise_val+"<br>";
         return firstPromise_val+10;
      }).
      then(function(secondPromise_val){
         alert(secondPromise_val)
         document.getElementById("result").innerHTML +="Second Promise val: "+ secondPromise_val+"<br>";
         return secondPromise_val+10;
      }).
      then(function(thirdpromise_val){
         alert(thirdpromise_val)
         document.getElementById("result").innerHTML +="Third Promise val: "+thirdpromise_val+"<br>";
         return thirdpromise_val+10;
      })
   </script>
</body>
</html>

登入後複製

讓我們了解承諾鍊是如何運作的。

第一個最初的承諾得到了兌現。
然後 .then() 方法呼叫它創建了一個新的 Promise 並得到了解析。
再次呼叫 .then() 方法，它建立了一個新的 Promise，然後它也得到了解析。
同樣，它正在工作，我們也可以添加另一個承諾處理程序。

所以，基本上 .then() 方法傳回一個新的 Promise，並使用 .then() 呼叫 next 等等。

範例 3

<!DOCTYPE html>
<html>
<head>
   <title>Promise chaining in javascript</title>
</head>
<body>
   <h3> Promise Chaining</h3>
   <p id ="result"></p>
   <script>
      let promise = new Promise(function (resolve, reject) {
         return resolve("My");
      }).
      then(function(firstPromise_val) {
         alert(firstPromise_val)
         return firstPromise_val+" Name";
      }).
      then(function(secondPromise_val){
         alert(secondPromise_val)
         return secondPromise_val+" is";
      }).
      then(function(thirdpromise_val){
         alert(thirdpromise_val)
         return thirdpromise_val+" Kalyan";
      }).
      then(function(thirdpromise_val){
         alert(thirdpromise_val)
         document.getElementById("result").innerHTML = thirdpromise_val
      })
   </script>
</body>
</html>

登入後複製

因此，我們看到了有關其工作原理的從基礎到承諾鏈的深入概念。

以上是JavaScript 中的 Promise 鍊是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7706

Java教學

1640

CakePHP 教程

1394

Laravel 教程

1288

PHP教程

1231

Related knowledge

前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

神秘的JavaScript：它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。