ES6 Promise詳解

来源:https://www.cnblogs.com/zdsdididi/archive/2022/08/18/16599344.html
-Advertisement-
Play Games

前言 本文主要是對Promise本身的用法做一個全面解析而非它的原理實現，如果你對Promise的用法還不是很熟悉或者想加深你對Promise的理解，我相信這篇文章一定會幫到你。 首先讓我們先瞭解一下JavaScript為什麼會引入Promise 回調地獄 讓我們先看這樣一段代碼，JQuery中aj ...


前言

本文主要是對Promise本身的用法做一個全面解析而非它的原理實現，如果你對Promise的用法還不是很熟悉或者想加深你對Promise的理解，我相信這篇文章一定會幫到你。

首先讓我們先瞭解一下JavaScript為什麼會引入Promise

回調地獄

讓我們先看這樣一段代碼，JQuery中ajax請求：

  $.ajax({
      url: "url1",
      data: {},
      success(res1) {
        //獲取到第一個數據
        console.log(res1);
        //根據第一個數去去獲取第二個數據
        $.ajax({
          url: "url2",
          data: {
            query: res1.xxx,
          },
          success(res2) {
            //獲取到第二個數據
            console.log(res2);
            //根據第二個數去去獲取第三個數據
            $.ajax({
              url: "url3",
              data: {
                query: res2.xxx,
              },
              success(res3) {
                //獲取到第三個數據
                console.log(res3);
                //...
              },
            });
          },
        });
      },
      error(err) {
        console.log(err);
      },
    });

我們會發現這些回調一層又一層，這就被稱為回調地獄(callback hell)，尤其業務邏輯複雜的時候這些回調就會變得難以維護。於是Promise就出現了。我們再看一個使用promise封裝的axios請求：

 axios
      .get(url1, {})
      .then((res1) => {
        //獲取到第一個數據
        console.log(res1);
        //根據第一個數去去獲取第二個數據
        return axios.get(url2, { query: res1.xxx });
      })
      .then((res2) => {
        //獲取到第一個數據
        console.log(res2);
        //根據第二個數去去獲取第三個數據
        return axios.get(url3, { query: res2.xxx });
      })
      .then((res3) => {
        //獲取到第三個數據
        console.log(res3);
        //...
      })
      .catch((err) => {
        console.log(err);
      });

通過對比我們會發現Promise解決了傳統的回調函數的回調地獄問題，使得業務邏輯顯得更加清晰了。接下來我們就開始正式介紹Promise了。

概述

Promise是現代非同步編程的基礎,在Promise返回給我們的時候操作其實還沒有完成，但Promise對象可以讓我們操作最終完成時對其進行處理，無論成功還是失敗。

Promise的返回有三種狀態分別是等待（pending）， 成功（fulfilled），拒絕（rejected），我們看以下示例(後續我們將用延時器setTimeout來代表我們的非同步操作）

 const promise1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(1);
      },1000);
    });
    console.log(promise1);

此時我們可以看到我們獲取的Promise是pending(等待的狀態)。

1658637004450.jpg

同樣當我們一秒鐘過後再去獲取Promise

 const promise1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(1);
      }, 1000);
    });
    setTimeout(() => {
      console.log(promise1);
    }, 1000);

它得到的就是成功（fulfilled）狀態

1658637292640.jpg

然後我們將resolve換成reject

const promise1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        reject(1);
      }, 1000);
    });
    setTimeout(() => {
      console.log(promise1);
    }, 1000);

它得到的便是拒絕（rejected）狀態，同時給你拋出了一個錯誤

1658637478041.jpg

基本使用

Promise構造函數只有一個函數作為參數,這個函數會在一個Promise被實例化出來後會被立即執行

 new Promise((resolve, reject) => {
      console.log(1);
    });
    console.log(2);

此時輸出的結果是：1 2

Promise接收的函數有兩個參數，分別是resolve和reject，其中resolve代表一切正常的時候所調用的函數，reject則代表我們程式異常的時候所調用的函數。resolve函數傳入的參數用於向下一個then傳遞一個值,而reject函數傳入的參數則會被.catch捕捉。而Promise.finally則是在Promise狀態完成後觸發的一個回調，即無論是resolve還是reject都會觸發

    //成功示例
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("成功的值");
      });
    })
      .then((res) => {
        console.log(res); //成功的值
      })
      .catch((err) => {
        //不會觸發
        console.log(err);
      })
      .finally(() => {
        console.log("end"); //end
      });

    //失敗示例
    new Promise((resolve, reject) => {
      setTimeout(() => {
        reject("失敗的的值");
      });
    })
      .then((res) => {
        //不會觸發
        console.log(res);
      })
      .catch((err) => {
        console.log(err); ////失敗的值
      })
      .finally(() => {
        console.log("end"); //end
      });

以上便是Promise的基本使用，但是只掌握它的基本使用可不行，我們還需要對其更深入的研究

鏈式調用

當我們使用Promise的時候，只要我們在.then的回調函數中返回一個成功狀態（resolve）的Promise，則在下一個.then的回調函數中便可獲取到這個成功函數（resolve）的參數，基於這個特性便有了Promise的鏈式調用。

    new Promise((resolve, reject) => {
      //這裡一般會有一個網路請求或其它非同步操作
        resolve("成功的值1");
    })
      .then((res) => {
        console.log(res); //成功的值1
        return new Promise((resolve, reject) => {
        //這裡一般會有一個網路請求或其它非同步操作
          resolve("成功的值2");
        });
      })
      .then((res) => {
        console.log(res); //成功的值2
        return new Promise((resolve, reject) => {
          //這裡一般會有一個網路請求或其它非同步操作
          resolve("成功的值3");
        });
      })
      .then((res) => {
        console.log(res); //成功的值3
        //以此類推...
      });

我們可以對其進行簡寫，比如

    new Promise((resolve, reject) => {
      //這裡一般會有一個網路請求或其它非同步操作
      resolve("成功的值");
    });

可以簡寫為

Promise.resolve('成功的值')

所以我們的鏈式調用可以簡寫為

    new Promise((resolve, reject) => {
      //這裡一般會有一個網路請求或其它非同步操作
      resolve("成功的值1");
    })
      .then((res) => {
        console.log(res); //成功的值1
        return Promise.resolve("成功的值2");
      })
      .then((res) => {
        console.log(res); //成功的值2
        return Promise.resolve("成功的值3");
      })
      .then((res) => {
        console.log(res); //成功的值3
        //以此類推...
      });

同樣的reject的簡寫方式也和resolve一樣

    new Promise((resolve, reject) => {
      //這裡一般會有一個網路請求或其它非同步操作
      reject("失敗的值");
    });
    
    //簡寫為
    Promise.reject('失敗的值')

一般我們在實際項目中一般會這樣寫

      ...
      //網路請求中獲取到數據後
      if(xxx){
        //成功
        return Promise.resolve('請求的值')
      }
      return Promise.reject('失敗原因')
      ...

其實.then中也會自動返回Promise的封裝,也就是說這個鏈式調用我們可以直接這樣寫

    new Promise((resolve, reject) => {
      //這裡一般會有一個網路請求或其它非同步操作
      resolve("成功的值1");
    })
      .then((res) => {
        console.log(res); //成功的值1
        return "成功的值2";
      })
      .then((res) => {
        console.log(res); //成功的值2
        return "成功的值3";
      })
      .then((res) => {
        console.log(res); //成功的值3
        //以此類推...
      });

以上便是Promise的鏈式調用，Promise的鏈式調用一般用於這些步驟間有先後順序的操作，比如開頭舉的例子，需要使用前一個介面請求的數據作為參數去請求另一個介面的情形。

Promise中的all函數

在實際項目中你是否遇到過這樣一個情況：你有A、B、C三個介面（或則更多），C介面的參數需要用到A和B兩個介面的結果值，此時你為怎麼做？

  • 做法1

先請求A介面再請求B介面最後再根據AB介面的結果去請求C介面

    new Promise((resolve, reject) => {
      //請求A介面，這裡用setTimeout模擬請求
      setTimeout(() => {
        resolve("A的結果");
      }, 100);
    })
      .then((res) => {
        //根據A結果請求B介面
        setTimeout(() => {
          return "B的請求結果";
        }, 100);
      })
      .then((res) => {
        //根據A和B結果請求C介面
        setTimeout(() => {
          console.log("C的請求結果");
        }, 100);
      })
      .catch((err) => {
        //這裡暫不做錯誤考慮
      });

這種寫法邏輯上是沒問題的，但是B和A的請求之間是完全沒有交集的，而瀏覽器的http請求是可以同時發起多個請求的，所以這種寫法很明顯增加了介面請求時間

  • 做法2

在每個請求結束後都去調用請求C的函數，在這個函數中判斷兩個請求的數據是否都獲取到了，然後再進行處理

    let isResultA = false;
    let isResultB = false;

    //請求A介面，這裡用setTimeout模擬請求
    setTimeout(() => {
      isResultA = true;
      getC()
    }, 100);

    //請求B介面，這裡用setTimeout模擬請求
    setTimeout(() => {
      isResultB = true;
      getC()
    }, 100);
    function getC() {
      if (isResultA && isResultB) {
        //根據A和B的結果請求C介面數據
        setTimeout(() => {
          console.log("C的請求結果");
        }, 100);
      }
    }

很顯然這種在寫法上是很麻煩的，所以Promise提供了all方法

  • 做法3

Promise.all接收一個iterable類型（Array，Map，Set 都屬於 ES6 的 iterable 類型），可以放多個Promise實例，最後.then中獲得的是這些輸入的Promise的resolve回調的結果數組。同時只要任何一個輸入的Promise的reject回調執行或者輸入不合法的Promise就會立即拋出錯誤

    Promise.all([
      new Promise((resolve, reject) => {
        //請求A介面，這裡用setTimeout模擬請求
        setTimeout(() => {
          resolve("A的結果");
        }, 2000);
      }),
      new Promise((resolve, reject) => {
        //請求B介面，這裡用setTimeout模擬請求
        setTimeout(() => {
          resolve("B的結果");
        }, 1000);
      }),
    ])
      .then((res) => {
        console.log(res[0]); //A的結果
        console.log(res[1]); //B的結果
        //根據A和B的結果請求C介面數據
        setTimeout(() => {
          console.log("C的請求結果");
        }, 100);
      })
      .catch((err) => {
        console.log(err);
      });

Promise中的race函數

Promise.race方法返回一個promise，一旦迭代器中的某個promise完成，返回的promise就會被完成。簡單來說就是它接收的promise實例中誰快就用誰的結果，不管你的結果是resove的還是reject

    Promise.race([
      new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve("結果1");
        }, 1000);
      }),
      new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve("結果2");
        }, 500);
      }),
      new Promise((resolve, reject) => {
        //請求B介面，這裡用setTimeout模擬請求
        setTimeout(() => {
          reject("結果3");
        }, 100);
      }),
    ])
      .then((res) => {
        //不會觸發
        console.log(res);
      })
      .catch((err) => {
        console.log(err); //結果3
      });

上面示例很顯然第三個Promise示例最先返回結果，所以Promise.race便使用了第三個Promise的結果

Promise中的any函數

Promise.any函數它也接收一個Promise實例的可迭代對象，只要其中的一個promise實例成功，就返回那個已經成功的promise，只有所有的promise實例都失敗才會返回失敗的（reject）的數組

    Promise.any([
      new Promise((resolve, reject) => {
        setTimeout(() => {
          reject("結果1");
        }, 1000);
      }),
      new Promise((resolve, reject) => {
        setTimeout(() => {
          reject("結果2");
        }, 500);
      }),
      new Promise((resolve, reject) => {
        //請求B介面，這裡用setTimeout模擬請求
        setTimeout(() => {
          reject("結果3");
        }, 100);
      }),
    ])
      .then((res) => {
        //不會觸發
        console.log(res);
      })
      .catch((err) => {
        console.log(err); //AggregateError: All promises were rejected
      });

這個函數適用的場景可能不是很多，在這裡我大概想到的一個場景就是：有三個介面A,B,C,這三個介面很不穩定但是它們返回的成功結果都一樣，所以我們需要對這三個介面進行同時請求，只要它們其中有一個介面返回成功，那麼我們便用這個介面的值。所以這三個介面只要有一個可用我們便可拿到想要的結果

async和await

async和await其實就是promise的語法糖形式，它可以讓我們的非同步代碼包裝成同步的形式理解。await顧名思義就是等待的意思，它必須使用在一個async的函數中，await後面跟的是一個實例化Promise，它返回的值則是這個Promise成功返回的 resolve 狀態值。其實它的用法很簡單，如下

      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve("結果");
        }, 1000);
      });
    };

    const getData = async () => {
      const res = await promiseFun();
      console.log(res);//結果
    };
    getData();

如果我們把文章開頭的axios請求例子改為async,await的形式它將會是這個樣子

    const getAxiosData = async () => {
      try {
        const res1 = await axios.get(url1, {});
        const res2 = await axios.get(url2, { query: res1.xxx });
        const res3 = await axios.get(url2, { query: res2.xxx });
        console.log(res3);
      } catch (err) {
        console.log(err);
      }
    };
    getAxiosData();

此時的代碼邏輯看起來就會清晰很多

寫在最後

Promise的大致用法基本也就介紹完了，其實Promise還涉及到另一個方面的知識事件迴圈（Event Loop） 還有巨集任務微任務等，由於篇幅原因，這部分我會抽時間單獨寫一篇關於這方面的文章。同時如果你發現文中有錯誤或不妥的地方歡迎指出，一定及時修改，感謝~

創作不易，你的點贊就是我的動力！如果感覺這篇文章對你有所幫助的話就請點個贊吧，感謝orz


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Linux防火牆操作firewall、iptable
    iptables防火牆命令操作 # 查看防火牆狀態 service iptables status # 停止防火牆 service iptables stop # 啟動防火牆 service iptables start # 重啟防火牆 service iptables restart # 永久關閉 ...
  • 如何快速上手AIRIOT？
    AIRIOT物聯網低代碼平臺，快速構建穩定可靠的物聯網系統，豐富的功能庫及組件庫，具備低成本、高效率、易操作，可擴展等特點，節省物聯網項目實施時間及人力成本，支持二次開發。 【六步快速上手，玩兒轉AIRIOT】 1、添加模型：點擊添加模型，創建模型demo ​ 2、添加數據點:點擊設備配置，選擇驅動 ...
  • 1-2月智利，越南，阿根廷5G技術標準更新
    智利SUBTEL宣佈啟用5G技術 2021年12月16日，智利電信監管機構 (SUBTEL) 發佈官方新聞宣佈智利成為拉美地區首個啟用5G技術的國家，並要求電信運營商的5G網路人口覆蓋率需達90%。即日起運營商即可展開5G網路服務，併為擁有5G移動設備的用戶提供合適的商業計劃。 越南MIC發佈第29 ...
  • 2022年1-2月全球技術標準更新
    1.歐亞經濟聯盟 - 歐亞經濟委員會發佈第130號決定 2021年11月12日，歐亞經濟委員會（EEC）的理事會發佈了第130號決定，主題為“在歐亞經濟聯盟關稅區內進行強制性合格評定的產品進口到歐亞經濟聯盟關稅區的程式”。根據該決定，現在在清關時，僅擁有EAEU CoC/ DoC的副本或掃描件以及用 ...
  • 2022-8-17 mysql 第三天
    DQL查詢語言 子查詢 按照結果集的行列數不同，子查詢可以分為以下幾類： 標量子查詢：結果集只有一行一列（單行子查詢） 列子查詢：結果集有一列多行 行子查詢：結果集有一行多列 表子查詢：結果集多行多列 -- 查詢比小虎年齡大的所有學生 -- 標量子查詢 SELECT * FROM student W ...
  • 在windows上用docker desktop安裝StoneDB
    自6月底開源以來，許多熱心的社區用戶都對StoneDB進行了編譯和測試，也有一些用戶詢問StoneDB是否會支持Windows。雖然適配Windows版本的StoneDB尚未進入研發計劃，但實際上我們也可以通過強大的docker在windows上體驗StoneDB的性能。本文就從一個初學者角度，帶大 ...
  • 應用缺少POI數據，如何開發地點深度信息？
    用戶在App里搜索某個地點時，並不滿足單一的地點信息，希望得到更多可以幫助其做決策的深度信息。例如有打車出行需求的用戶，在打車App里搜索地點時可以顯示周邊的地點，精確到某個路口，讓用戶可以自由選擇合適的上下車點。銀行金融App類可以讓用戶在搜索時顯示附近線下網點和營業時間、電話以及周邊道路信息等。 ...
  • JavaScript快速入門-03-數據類型
    3 數據類型 3.1 簡介 JavaScript中的每個值都是屬於一種特定的數據類型。JavaScript中一共有以下幾種數據類型，詳細如下所示： 原始類型：Undefined、Null、Boolean、Number、String 和Symbol 對象：Object 通常將數值、字元串和布爾值三種類 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類