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
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類