前端 Promise 全面深入解析

一、Promise基礎概念

1、什么是Promise?
Promise是一個表示異步操作最終完成或失敗的對象。它允許你為異步操作的成功結果和失敗原因分別綁定相應的處理方法。
2、Promise的三種狀態
請添加圖片描述

  • pending(等待中): 初始狀態,既不是成功,也不是失敗
  • fulfilled(已成功): 操作成功完成
  • rejected(已拒絕): 操作失敗

狀態一旦改變就不可逆:pending → fulfilled 或 pending → rejected

3、創建Promise

const myPromise = new Promise((resolve, reject) => {// 異步操作setTimeout(() => {const success = Math.random() > 0.3;if(success) {resolve("操作成功!");  // 將狀態改為 fulfilled} else {rejected("操作失敗!");  // 將狀態改為 rejected}}, 1000);
});

二、Promise的基本使用

1、處理Promise結果

myPromise.then(result => {console.log("成功", result);}).catch(error => {console.log("失敗",  error);	}).finally(() => {console.log("無論成功還是失敗都會執行");});

2、Promise鏈式調用

function asyncOperation(value) {return new Promise((resolve, reject) => {setTimeout(() => {if (value > 0.5) {resolve(value * 100);} else {reject("值太小");}}, 1000);});
}asyncOperation(0.8).then(result => {console.log("第一步結果:", result);return asyncOperation(result / 200); // 返回新 Promise}).then(result => {console.log("第二步結果:", result);return "最終結果: " + result; // 返回普通值}).then(result => {console.log(result);}).catch(error => {console.error("鏈中任何一步出錯:", error);});

三、Promise的靜態方法

1、Promise.all()
等待所有Promise完成,或任何一個Promise失敗

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, 'foo'));
const promise3 = fetch('https://api.example.com/data');Promise.all([promise1, promise2, promise3]).then(values => {console.log(values);  // [3, 'foo', Response]}).catch(error => {console.error('有一個Promise失敗:', error);	})

2、Promise.race()
返回最先完成或拒絕的Promise的結果

const timeoutPromise = new Promise((_, reject) => setTimeout(() => reject('超時'), 5000)
);const fetchPromise = fetch('https://api.example.com/slow-data');Promise.race([fetchPromise, timeoutPromise]).then(response => {console.log('數據獲取成功');	}).catch(error => {console.error('請求超時或失敗:', error);});

3、Promise.allSettled()
等待所有Promise完成(無論成功或失敗)

const promises = [Promise.resolve('成功'),Promise.reject('失敗'),Promise.resolve('另一個成功')
];Promise.allSettled(promises).then(results => {results.forEach((result, index) => {if (result.status === 'fulfilled') {console.log(`Promise 

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/pingmian/94333.shtml
繁體地址,請注明出處:http://hk.pswp.cn/pingmian/94333.shtml
英文地址,請注明出處:http://en.pswp.cn/pingmian/94333.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

【LIN】2.LIN總線通信機制深度解析:主從架構、五種幀類型與動態調度策略

參考文章: Lin總線通信在STM32作為主機代碼以及從機程序 基于STM32的LIN總線的實現 STM32F0-LIN總線通訊程序代碼 主從調試OK LIN協議通信DEMO及源碼剖析 前文已講解關于LIN幀代碼如何實現:【LIN】1.LIN通信實戰:幀收發全流程代碼實現 幀類型…

Maven的概念與Maven項目的創建

MavenMaven的概念依賴管理項目構建Maven安裝Maven項目的創建Maven的第一個項目Maven的第二個項目Maven的概念 Maven 是 Apache 基金會推出的跨平臺的項目管理工具,主要服務于基于Java平臺的項目構建、依賴管理和項目信息管理,目前是 Java 生態中最主流的…

Mysql之binlog日志說明及利用binlog日志恢復數據操作記錄

眾所周知,binlog日志對于mysql數據庫來說是十分重要的。在數據丟失的緊急情況下,我們往往會想到用binlog日志功能進行數據恢復(定時全備份+binlog日志恢復增量數據部分),化險為夷! 廢話不多說,下面是梳理的binlog日志操作解說: 一、初步了解binlog MySQL的二進制日志…

windows安裝Elasticsearch,ik分詞器,kibana可視化工具

安裝地址 elasticsearch安裝地址: Past Releases of Elastic Stack Software | Elastic 分詞器下載地址: https://github.com/infinilabs/analysis-ik?tabreadme-ov-file kibana下載地址: Past Releases of Elastic Stack Software | Elastic 注意:版本一定要統…

GaussDB 數據庫架構師修煉(十八)SQL引擎-SQL執行流程

1 SQL執行流程查詢解析:詞法分析、語法分析、 語義分析 查詢重寫:視圖和規則展開、基于規則的查詢優化 計劃生成:路徑搜索和枚舉、選出最優執行計劃 查詢執行:基于優化器生成的物理執行計劃對數據進行獲取和計算2 解析器和優化器S…

能源管理系統中的物聯網數據采集:深度探索與操作指南

一、引言物聯網(Internet of Things, IoT)作為數字化時代的核心基礎設施,通過將物理世界的設備、物體與網絡連接,實現數據的實時感知與交互。而數據采集作為物聯網系統的 “神經末梢”,是整個體系運行的基礎。本文將從…

Java實現一個簡單的LRU緩存對象

LRU(Least Recently Used)算法的核心思想是:最近使用的數據將被保留,最久未使用的數據將被淘汰。這種策略適用于內存有限、但又需要高頻訪問的數據場景,比如緩存系統、頁面置換算法等。mysql的緩沖池就是使用的LUR Inn…

整體設計 之定稿 “凝聚式中心點”原型 --整除:智能合約和DBMS的在表層掛接 能/所 依據的深層套接 之2

摘要三“式”三“心”三“物” 整數原型三段式表達 的 凝聚式中心點dot 、組織式核心元素位element和分析式內核基因座locus 三者分別以**“等號線(Arc)”**(動態關聯)、**“邊界線(Transition)”**&#…

vue.根據url生成二維碼

文章目錄概要QR碼步驟1. 引入庫2. 生成二維碼3. 將二維碼加入頁面中用javascript庫簡化二維碼生成1. 引入庫2. 使用庫生成二維碼二維碼美化和定制1. 調整大小2. 調整顏色3. 添加自定義形狀和圖案4. 添加logo性能優化與錯誤處理1. 減少不必要的計算2. 異步處理概要 生成 URL 二…

WPF+MVVM入門學習

最近在學WPF的MVVM,有兩種方式實現,一種是自己實現,一種是借助MVVM框架,接下來通過一個醫院自助打印報告機鍵盤輸入界面來演示自己實現、框架CommunityToolkit和Prism的區別。 項目源碼:https://gitee.com/cplmlm/Sel…

[e3nn] docs | 不可約表示(Irreps)

鏈接:https://docs.e3nn.org/en/latest/examples/examples.html docs:e3nn e3nn是一個用于構建歐幾里得(E(3))等變神經網絡的Python庫,這意味著它們能自動保持三維旋轉和反射的對稱性。 該庫使用不可約表示(Irreps)來描述數據變換方式&…

深入淺出 ArrayList:從基礎用法到底層原理的全面解析(中)

四、ArrayList 常用方法實戰 —— 從添加到遍歷的全場景覆蓋ArrayList 提供了數十個方法,但日常開發中常用的只有 10 個左右,我們按 “元素操作”“集合查詢”“遍歷方式” 三類來梳理,每個方法都附帶示例和注意事項。4.1 元素添加&#xff1…

java后端如何實現下載功能

后端需要把要下載的若干文件 按 ZIP 格式編碼成一段二進制字節流,然后以 Content-Type: application/zip Content-Disposition: attachment; filenamexxx.zip 的形式寫進 HTTP 響應體。瀏覽器收到這段“ZIP 格式的字節流”后,就會彈出保存對話框&#xf…

AI生成技術報告:GaussDB與openGauss的HTAP功能全面對比

GaussDB 與 openGauss 的 HTAP 功能比較 前言 GaussDB集中式版本從505.2版本開始引入了HTAP混合負載功能,openGauss也從7.0.0 RC1版本開始引入了HTAP行列融合功能,加強了行存轉列存的使用友好度,但兩者的實現似乎存在不小的差異。 雖然文檔…

小程序開發指南(四)(UI 框架整合)

?講解了微信小程序 UI 框架的使用方法和特點,根據項目需求選擇合適的組件庫。附有相應的組件庫預覽碼,也是將所有的微信小程序原生組件庫整合在一起方便后續開發的使用。如果有不好或者有錯誤的地方請告知!希望可以與大家相互的交流學習&…

golang 1.25.0 安裝

wget https://golang.google.cn/dl/go1.25.0.linux-amd64.tar.gz tar -C /usr/local/ -xzf go1.25.0.linux-amd64.tar.gz ln -s /usr/local/go/bin/* /usr/bin/ go env -w GO111MODULEon go env -w GOPROXYhttps://goproxy.cn,direct

基于深度學習的人臉表情識別系統:YOLOv5/v6/v7/v8/v10模型實現與UI界面集成

基于YOLOv5/v7/v8的智能人臉表情識別系統:從算法原理到應用實現 表情識別的技術價值與挑戰 人臉表情識別(Facial Expression Recognition, FERYOLOv5/v7/v8等深度學習算法構建高效的表情識別系統,并設計直觀的UI界面集成方案。無論你是深度學習初學者還是有經驗的開發者,…

初步了解多線程

系列文章目錄 目錄 系列文章目錄 前言 一、進程 二、線程 1. 線程解決資源開銷的方式 2. 線程和進程的聯系和區別 三、多線程編程 1. 直觀了解多線程 2. 線程的創建方式 1. 繼承 Thread 重寫 run() 方法 2. 實現 Runable 接口,重寫 run() 方法 3. 繼承 …

安卓Android低功耗藍牙BLE連接異常報錯133

安卓Android低功耗藍牙BLE連接異常報錯133 之前連接一直好好的,不知道為什么今天突然就連接不了藍牙了,報錯133,按照 找網上的說明總是說清除GATT緩存,其實并不是我的問題,最后看到這里https://softs.im/android-ble-%e8%bf%9e%e6%8e%a5%e9%94%99%e8%af%af133/ 有如下說明: 情…