什么是Promise?
Promise是JavaScript中处理异步操作的一种对象。它代表一个异步操作的最终完成(或失败)及其结果值。Promise提供了一种更优雅的方式来处理异步代码,避免了回调地狱。
Promise的基本使用
Promise有三种状态:pending(待定)、fulfilled(已成功)和rejected(已失败)。一旦状态改变,就不会再变。Promise对象可以接受两个参数作为回调函数:resolve和reject。
-- -------------------- ---- -------
----- --------- - --- ----------------- ------- -- -
-- ----
------------- -- -
----- ------- - ----- -- ---------
-- --------- -
----------------
- ---- -
---------------
-
-- ------
---
--------------------- -- -
-------------------- -- --- ----
-------------- -- -
--------------------- -- ------------ ----
---Promise的方法
Promise对象提供了多个方法来处理异步操作:
then(onFulfilled, onRejected):用于指定操作成功的回调函数onFulfilled和操作失败的回调函数onRejected。catch(onRejected):相当于.then(null, onRejected),用于捕获并处理Promise链中的错误。finally(callback):无论Promise的状态如何,都会执行这个回调函数。通常用来清理资源。
-- -------------------- ---- -------
---------
------------ -- -
--------------------
------ ---------
--
------------ -- -
---------------------
--
----------- -- -
-------------------------------
---Promise链式调用
Promise的一个重要特性是可以进行链式调用。每个then方法返回一个新的Promise对象,这样可以在一个Promise链中连续调用多个异步操作。
-- -------------------- ---- -------
---------
------------ -- -
--------------------
------ ---------
--
--------------- -- -
-----------------------
------ -----------
--
----------------- -- -
-------------------------
--
------------ -- -
---------------------
---Promise.all和Promise.race
Promise.all(iterable):接收一个Promise数组作为参数,当所有的Promise都变为fulfilled状态时,返回一个新的Promise,其结果是一个包含所有Promise结果的数组;如果任何一个Promise变为rejected状态,则新的Promise立即变为rejected状态。Promise.race(iterable):接收一个Promise数组作为参数,返回一个新的Promise,其结果为数组中第一个完成的Promise的结果。
-- -------------------- ---- -------
----- -------- - ------------------------------
----- -------- - --- ----------------- ------- -- -
------------------- ----- --------------
---
----- -------- - --- ----------------- ------- -- -
------------------ ---- ----------------
---
---------------------- --------- ----------
------------- -- -
--------------------- -- -------------- -------------
--
------------ -- -
--------------------- -- ----------------
---
----------------------- --------- ----------
------------ -- -
-------------------- -- ------------
--
------------ -- -
--------------------- -- ----
---使用Promise实现异步加载图片
下面是一个使用Promise实现图片异步加载的例子:
-- -------------------- ---- -------
-------- ------------------- -
------ --- ----------------- ------- -- -
----- ----- - --- --------
------------ - -- -- -
---------------
--
------------- - -- -- -
---------- ------------- ----------
--
--------- - ----
---
-
-----------------------------------------------
----------- -- -
---------------------------------
--
------------ -- -
---------------------
---Promise的Polyfill实现
由于某些旧浏览器可能不支持原生Promise,我们可以使用polyfill来实现兼容性。
-- -------------------- ---- -------
----------------- -
-------- ----------------- -
---------- - ----------
---------- - ----------
----------- - ----------
------------------------- - ---
------------------------ - ---
----- ------- - ----- -- -
-- ----------- --- ---------- -
---------- - ------------
---------- - ------
------------------------------------ -- ------
-
--
----- ------ - ------ -- -
-- ----------- --- ---------- -
---------- - -----------
----------- - -------
----------------------------------- -- ------
-
--
--- -
----------------- --------
- ----- ------- -
--------------
-
-
---------------------- - --------------------- ----------- -
----------- - ------ ----------- --- ---------- - ----------- - ----- -- ------
---------- - ------ ---------- --- ---------- - ---------- - ----- -- - ----- ------ --
----- -------- - --- ----------------- ------- -- -
-- ----------- --- ------------ -
------------- -- -
--- -
----- - - ------------------------
------------------------ -- -------- --------
- ----- ------- -
--------------
-
-- ---
-
-- ----------- --- ----------- -
------------- -- -
--- -
----- - - ------------------------
------------------------ -- -------- --------
- ----- ------- -
--------------
-
-- ---
-
-- ----------- --- ---------- -
--------------------------------- -- -
------------- -- -
--- -
----- - - ------------------------
------------------------ -- -------- --------
- ----- ------- -
--------------
-
-- ---
---
-------------------------------- -- -
------------- -- -
--- -
----- - - ------------------------
------------------------ -- -------- --------
- ----- ------- -
--------------
-
-- ---
---
-
---
------ ---------
--
-------- ------------------------ -- -------- ------- -
-- --------- --- -- -
------ ---------- -------------------
-
--- -------
-- -- -- ---- -- ------- - --- -------- -- ------ - --- ------------ -
--- -
----- ---- - -------
-- ------- ---- --- ----------- -
------------ - -- -
-- -------- -------
------ - -----
------------------------ -- -------- --------
-- --- -- -
-- -------- -------
------ - -----
------------
---
- ---- -
-----------
-
- ----- ------- -
-- -------- -------
------ - -----
--------------
-
- ---- -
-----------
-
-
-------------- - --------
-----------通过以上介绍,我们了解了Promise的基础概念、基本使用方法、链式调用、常见的Promise方法,以及如何实现一个简单的Promise polyfill。希望这些内容对你理解和使用Promise有所帮助。