Promise （1） 如何使用Promise

来源:https://www.cnblogs.com/LHLVS/archive/2019/04/08/10645149.html
-Advertisement-
Play Games

Promise 也是面試高頻問題， 今天我們來看看Promise是什麼， 能做什麼， 怎麼用， 下一期我們自己來模擬一個myPromise 1 Promise 是什麼 我們要學會自己給自己提問， 才能加深我們的理解， 首先 Promise 是一個類， 類（class）是ES6 一個新的概念 ，和ES ...


Promise 也是面試高頻問題， 今天我們來看看Promise是什麼， 能做什麼， 怎麼用， 下一期我們自己來模擬一個myPromise

1  Promise 是什麼  

我們要學會自己給自己提問， 才能加深我們的理解， 首先 Promise 是一個類， 類（class）是ES6 一個新的概念 ，和ES5的構造函數相似， 

但不完全一樣，

類必須通過 new 操作符 調用 ;

子類通過super() 關鍵字 來產生this ， 在super()之前不能使用this ;

類上有靜態屬性 和 靜態方法 ， 並且子類可以繼承父類的靜態屬性和靜態方法 ；

Promise 中文 譯 為 承諾  ，承諾就是說出來的話不會改變， 

Promise 一旦狀態發生變化後就不會再變了 ，比如：

const p = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log(1);
        reject('reject');
        resolve('resolve')
    }, 2000);
}).then((data) => {
    console.log(data + '-suc')   // 狀態為 resolved 觸發
}, (err) => {
    console.log(err + '-err')   // 狀態為 rejected  觸發
});

結果：兩秒後列印  1   ，  reject-err

 

 由此可見  ， 由於reject() 方法 先把 promise 的 狀態  由 pendding  變為 rejected  ， 

所以狀態就是rejected ， 後面再執行resolve() 方法也沒用了， 狀態只改變一次。

 

2  Promise 能做什麼

Promise 是為瞭解決非同步回調地獄而出現的， 就是解決那種回調函數中嵌套回調函數的情況。。。。

它可以把這種非同步操作以同步操作的流程表達出來， 一個經典的圖片載入例子：

function loadImg(src) {
    const p = new Promise((resolve, reject) => {
        const image = document.createElement('img'); // 創建image標簽
        image.src = src;  // 開始載入
        image.onload = () => {  // 載入成功的回調
            resolve(image); // 成功把image返回
        };
        image.onerror = () => {  // 載入失敗的回調
            reject(new Error('url not found')); // 失敗丟出error
        }
    });
    return p;
}
loadImg('https://timgsa.baidu.com/timg' +
    '?image&quality=80&size=b9999_10000&sec=1554215359089&di=173ff60aee0bcc177d33dced2c88b2ed' +
    '&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F-fo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%' +
    '2Fitem%2F55e736d12f2eb9388d4c2ebad9628535e5dd6f50.jpg').then((data) => {
    document.body.appendChild(data);   //  成功 把 image 標簽 插入 body
    data.style.width = '800px';
    data.style.height = '600px';
}).catch((err) => {
    console.log(err);  // 失敗列印出錯誤
});

效果圖：

把 圖片載入 和  載入成功後的數據處理函數   以   同步操作表達出來    ， 而不是把數據處理函數

嵌套在圖片載入成功的函數里。

 

3 Promise 的其他註意事項

　　1. resolve函數 和 reject 函數 里 都可以傳參  ， reject里一般傳Error的實例，

　　　resolve 里 除了可以傳 正常的值 還可以傳另一個Promise實例，比如：

const P1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject(new Error('出錯啦'))
    }, 4000);
});
const P2 = new Promise ((resolve, reject) => {
    setTimeout(() => {
        resolve(P1)
    }, 1000);
});
P2.then((data) => {
    console.log(data);
}, (err) => {
    console.log(err)
});

結果:     4 秒 列印出 錯誤信息

 

 有的小伙伴可能會有疑問，P2 不是執行resolve函數了嗎， 為什麼列印出的是error 呢 ？ 

我們重頭開始分析， P1 創建 並 立即 執行 ， 4秒後 P1 執行 reject ()  ；

　　　　　　然後 P2 創建 並立即執行 ， 1 秒後  執行 resolve（）；

　　　　　　1 秒鐘 到了 ， P2 執行 resolve（）， 但是 P2 的 resolve 返回的是 P1, 

　　　　　　那麼後面 P2.then 和  P2 其實就沒什麼 關係 了 ， 它 就和 P1 的狀態 綁定 在 一起 了 ，

　　　　　　4 秒鐘 到了 ， P1 的狀態 變成 rejected  ， P2.then 列印 error  

我們再來一個 例子驗證  ：

const P2 = new Promise ((resolve, reject) => {
    setTimeout(() => {
        resolve(new Promise((suc, err) => {
            
        }))
    }, 1000);
});
P2.then((data) => {
    console.log(data);
}, (err) => {
    console.log(err)
});

結果 ： 控制台沒有任何輸出   

 

為什麼 呢？ P2.then 依賴  resolve（）里 返回的 Promise 對象 的 狀態  ， 

而  我 沒有 調用  任何 改變 其 狀態 的api   ， 所以 它 的狀態 一直是 pendding  ,

所以沒有輸出。

 

3 Promise 上的靜態方法

  ①   Promise.all()

　　它接受一個由Promise對象組成的數組， 只有數組中所有Promise的狀態都為resolved時才會調用成功的回調，

　　只要有一個狀態為rejected， 遇到第一個狀態變為rejected時， 就會調用失敗的回調；

　　例子：　　

const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(1);
    }, 2000);
});
const p2 = new Promise((resolve, reject) => {
    resolve(2);
});
const p3 = new Promise((resolve, reject) => {
    resolve(3);
});

Promise.all([p1, p2, p3]).then((data) => {
    console.log(data);   //  2 秒後輸出[1, 2, 3]
}).catch((error) => {
    console.log(error)
});

　　兩秒後所有狀態才變為resolved，然後輸出結果。

再看個例子：

const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(1);
    }, 2000);
});
const p2 = new Promise((resolve, reject) => {
    reject(2);
});
const p3 = new Promise((resolve, reject) => {
    reject(3);
});

Promise.all([p1, p2, p3]).then((data) => {
    console.log(data);
}).catch((error) => {
    console.log(error) // 2
});

p2 狀態變為rejected後，Promise.all()的狀態就變為rejected，並列印出2，

上文我們已經說過， promise的狀態只會發生一次改變， 所以即使p3狀態再變為rejected，

Promise.all().catch也不會再輸出了。

② Promise.race() 和 Promise.all()相反， 只要有一個狀態變為resolved， 就會執行then的回調, 

並且只列印第一個狀態變化返回的值

例子:

const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject(1);
    },3000);
});
const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject(2);
    }, 1000)
});
const p3 = new Promise((resolve, reject) => {
    reject(3);
});

Promise.race([p1, p2, p3]).then((data) => {
    console.log(data + 'suc');
}).catch((error) => {
    console.log(error + 'err'); // 3err
});

p3的狀態最先發生改變所以列印3err.

 

Promise.resolve( )  返回一個狀態為resolved的promise對象

Promise.reject() 返回一個狀態為rejected 的promise對象

註意事項，鏈式調用then()  如果不顯示return， 隱式返回一個狀態為resolved, 值為undefined的promise對象

例子：

const p3 = new Promise((resolve, reject) => {
    resolve(3);
}).then((data) => {
    console.log(data)  // 3
    // return Promise.reject(2);
}).then((data) => {
    console.log(data)   // undefined
}).then((data) => {
    console.log(data)   // undefined
});

我們再顯示return

const p3 = new Promise((resolve, reject) => {
    resolve(3);
}).then((data) => {
    console.log(data)  // 3
    return Promise.reject(2);
}).then((data) => {
    console.log(data)   // 不輸出
}).then((data) => {
    console.log(data)   // 不輸出
}).catch((err) => {
    console.log('err' + err) // err2
});

catch也一樣， 隱式返回一個狀態為resolved, 值為undefined的promise對象，

下一期我們來研究一下Promise的源碼

　

 


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

-Advertisement-
Play Games
更多相關文章
  • 安卓開發筆記（二十一）：Android Studio如何創建assets目錄
    方法如下： 因為在用WebView控制項查看安卓內置網頁的時候，必須創建這個資源文件夾，將網頁放置在這個目錄之下，預設是沒有assets這個目錄的，這樣才可以實現網頁代碼html.css.javascript與Android native的交互，所以我們來看一看怎麼做。很簡單,但不知道就做不來。讀取本 ...
  • iOS----------Runtime 獲取屬性列表 方法列表
    導入 #import <objc/runtime.h> unsigned int count; Method *methods = class_copyMethodList([UIAlertAction class], &count); for (int i = 0; i < count; i++) ...
  • Android許可權禁止及友好提示用戶開通必要許可權
    Android許可權 Android安全架構規定：預設情況下，任何應用都沒有許可權執行對其他應用、操作系統或用戶有不利影響的任何操作。這包括讀寫用戶的私有數據（聯繫人，簡訊，相冊，位置）、讀寫其他應用的文件、執行網路訪問、使設備保持喚醒狀態等等。 如果是一些正常的許可權(非高危許可權)，比如網路訪問等在應用 ...
  • iOS-UIImage圖片繪製顏色
    - (UIImage *)dtk_setImageColor:(UIColor *)imageColor{ //獲取畫布 UIGraphicsBeginImageContextWithOptions(self.size, NO, 0.0f); //畫筆沾取顏色 [imageColor setFill... ...
  • IE相容事件綁定V1.0
    想要相容IE678，少用原型，因為它們沒有完全實現ECMA-262規範 測試代碼 ...
  • JavaScript 對象（上）
    簡述： 1、是 JavaScript 的基本類型 2、是一種複合值，可通過名字訪問這些值 3、可看作屬性的無序集合，每個屬性都是一個名/值對（屬性名是字元串或標識符） 4、可以從一個稱為原型的對象繼承屬性（核心特征） 5、是動態的，可新增或刪除屬性，操作對象是通過引用而不是值 6、屬性名可以是包含空 ...
  • Express 框架
    Express 是一個簡潔而靈活的 node.js Web應用框架, 提供了一系列強大特性幫助你創建各種 Web 應用，和豐富的 HTTP 工具。使用 Express 可以快速地搭建一個完整功能的網站。 Express 框架核心特性： 可以設置中間件來響應 HTTP 請求。 定義了路由表用於執行不同 ...
  • __proto__、prototype和原型對象
    一、__proto__ 對象內部存在一個指針，用來指向上一層函數的原型對象。ECMA-262第五版中關這個指針叫[[prototype]],但Firefox、Safari和Chrome在每個對象上都支持一個屬性__proto__,這也就是網上說的‘每個對象都有一個__proto__屬性’的原因。 二 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類