JavaScript同步異步處理Promise的常用方法

更新時間：2025年06月17日 08:41:14 作者：星極天下第一

Promise是JavaScript中用于異步處理的一種方式,一個Promise代表了一個可能會在將來完成的異步操作,這篇文章主要介紹了JavaScript同步異步處理Promise的常用方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

一、什么是Promise

一個 Promise 是一個代理，它代表一個在創(chuàng)建 promise 時不一定已知的值。它允許你將處理程序與異步操作的最終成功值或失敗原因關聯(lián)起來。

二、Promise的三種狀態(tài)

待定（pending）：初始狀態(tài)，既沒有被兌現(xiàn)，也沒有被拒絕。
已兌現(xiàn)（fulfilled）：意味著操作成功完成。
已拒絕（rejected）：意味著操作失敗。

我們在使用Promise時，可以用resolve, reject兩個函數(shù)來控制其狀態(tài)，前者時通過，后者是拒絕

三、用Promise處理并發(fā)的常用方法

1.Promise.all()

在所有傳入的 Promise 都被兌現(xiàn)時兌現(xiàn)；在任意一個 Promise 被拒絕時拒絕。

案例展示：

（1）全部都通過

const promiseA = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('promiseA')
        }, 500)
    })
    const promiseB = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('promiseB')
        }, 1000)
    })
    const promiseC = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('promiseC')
        }, 1500)
    })
    Promise.all([promiseA, promiseB, promiseC])
        .then(res => {
            console.log(res)
        })
        .catch(err => {
            console.log(err)
        })

結果：

（2）有一個拒絕

const promiseA = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('promiseA')
        }, 500)
    })
    const promiseB = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('promiseB')
        }, 1000)
    })
    const promiseC = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('promiseC')
        }, 1500)
    })
    Promise.all([promiseA, promiseB, promiseC])
        .then(res => {
            console.log(res)
        })
        .catch(err => {
            console.log(err)
        })

結果：

（3）全部被拒絕

const promiseA = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('promiseA')
        }, 500)
    })
    const promiseB = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('promiseB')
        }, 1000)
    })
    const promiseC = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('promiseC')
        }, 1500)
    })
    Promise.all([promiseA, promiseB, promiseC])
        .then(res => {
            console.log(res)
        })
        .catch(err => {
            console.log(err)
        })

結果：

2.Promise.allSettled()

在所有的 Promise 都被敲定時兌現(xiàn)。

案例展示：

（1）全部通過

const promiseA = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('promiseA')
        }, 500)
    })
    const promiseB = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('promiseB')
        }, 1000)
    })
    const promiseC = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('promiseC')
        }, 1500)
    })
    Promise.allSettled([promiseA, promiseB, promiseC])
        .then(res => {
            console.log(res)
        })
        .catch(err => {
            console.log(err)
        })

結果：

（2）部分被拒絕

const promiseA = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('promiseA')
        }, 500)
    })
    const promiseB = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('promiseB')
        }, 1000)
    })
    const promiseC = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('promiseC')
        }, 1500)
    })
    Promise.allSettled([promiseA, promiseB, promiseC])
        .then(res => {
            console.log(res)
        })
        .catch(err => {
            console.log(err)
        })

結果：

（3）全部被拒絕

const promiseA = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('promiseA')
        }, 500)
    })
    const promiseB = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('promiseB')
        }, 1000)
    })
    const promiseC = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('promiseC')
        }, 1500)
    })
    Promise.allSettled([promiseA, promiseB, promiseC])
        .then(res => {
            console.log(res)
        })
        .catch(err => {
            console.log(err)
        })

結果：

3.Promise.any()

在任意一個 Promise 被兌現(xiàn)時兌現(xiàn)；僅在所有的 Promise 都被拒絕時才會拒絕。

案例展示：

（1）全部通過

    const promiseA = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('promiseA')
        }, 5000)
    })
    const promiseB = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('promiseB')
        }, 1000)
    })
    const promiseC = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('promiseC')
        }, 1500)
    })
    Promise.any([promiseA, promiseB, promiseC])
        .then(res => {
            console.log(res)
        })
        .catch(err => {
            console.log(err)
        })

結果：

注意函數(shù)觸發(fā)時間

（2）部分不通過

const promiseA = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('promiseA')
        }, 5000)
    })
    const promiseB = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('promiseB')
        }, 1000)
    })
    const promiseC = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('promiseC')
        }, 1500)
    })
    Promise.any([promiseA, promiseB, promiseC])
        .then(res => {
            console.log(res)
        })
        .catch(err => {
            console.log(err)
        })

結果：

（3）全部不通過

const promiseA = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('promiseA')
        }, 500)
    })
    const promiseB = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('promiseB')
        }, 1000)
    })
    const promiseC = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('promiseC')
        }, 1500)
    })
    Promise.any([promiseA, promiseB, promiseC])
        .then(res => {
            console.log(res)
        })
        .catch(err => {
            console.log(err)
        })

結果：

4.Promise.race()

在任意一個 Promise 被敲定時敲定（即第一個）。

案例展示：

const promiseA = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('promiseA')
        }, 5000)
    })
    const promiseB = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('promiseB')
        }, 1000)
    })
    const promiseC = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('promiseC')
        }, 1500)
    })
    Promise.race([promiseA, promiseB, promiseC])
        .then(res => {
            console.log(res)
        })
        .catch(err => {
            console.log(err)
        })

結果：

const promiseA = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('promiseA')
        }, 500)
    })
    const promiseB = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('promiseB')
        }, 1000)
    })
    const promiseC = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('promiseC')
        }, 1500)
    })
    Promise.race([promiseA, promiseB, promiseC])
        .then(res => {
            console.log(res)
        })
        .catch(err => {
            console.log(err)
        })

結果：

總結

到此這篇關于JavaScript同步異步處理Promise的常用方法的文章就介紹到這了,更多相關JS同步異步處理Promise內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

微信小程序下面商品左右滑動上面tab也跟隨變動功能實現(xiàn)
這篇文章主要介紹了小程序下面商品左右滑動上面tab也跟隨變動功能,也就是點擊tab切換下面的商品信息，滑動下面的商品信息tab也進行切換，本文給大家分享實現(xiàn)代碼，需要的朋友可以參考下
2022-07-07
javascript 通用簡單的table選項卡實現(xiàn)
鑒于UI妹妹每次交付過來的選項卡都夾帶了多多少少的js，而且每遇到選項卡就加一點js，造成垃圾低劣代碼逐漸堆積過多了，一直想做一個通用簡潔的選項卡庫。
2010-05-05
javascript Blob對象實現(xiàn)文件下載
這篇文章主要為大家介紹了vue組件通信的幾種方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-12-12
JavaScript正則表達式之選擇、分組與引用深度解析
正則表達式是非常重要的技術,它不僅僅只局限于java語言,不管是任何一種成型的語言,都會有正則,這篇文章主要介紹了JavaScript正則表達式之選擇、分組與引用的相關資料,需要的朋友可以參考下
2026-01-01
Blob對象實現(xiàn)文件上傳下載示例詳解
這篇文章主要為大家介紹了Blob對象實現(xiàn)文件上傳下載示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-01-01
實例詳解JSON數(shù)據(jù)格式及json格式數(shù)據(jù)域字符串相互轉換
JSON(JavaScript Object Notation)是一種輕量級的數(shù)據(jù)交換格式。JSON采用完全獨立于語言的文本格式，這些特性使JSON成為理想的數(shù)據(jù)交換語言
2016-01-01
JavaScript中獲取未知對象屬性的代碼
JavaScript中獲取未知對象屬性的代碼，需要的朋友可以參考下。
2011-04-04
JavaScript中你不知道的Object.entries用法
大家應該都知道,Object.entries()方法返回一個給定對象自身可枚舉屬性的鍵值對數(shù)組，其排列與使用 for...in 循環(huán)遍歷該對象時返回的順序一致,這篇文章主要給大家介紹了關于JavaScript中你不知道的Object.entries用法的相關資料,需要的朋友可以參考下
2021-10-10
詳解webpack的proxyTable無效的解決方案
這篇文章主要介紹了詳解webpack的proxyTable無效的解決方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-06-06
JavaScript DOM 對象深入了解
下面小編就為大家?guī)硪黄狫avaScript DOM 對象深入了解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-07-07