JavaScript同步異步處理Promise的常用方法
更新時(shí)間：2025年06月17日 08:41:14 作者：星極天下第一
Promise是JavaScript中用于異步處理的一種方式,一個(gè)Promise代表了一個(gè)可能會(huì)在將來(lái)完成的異步操作,這篇文章主要介紹了JavaScript同步異步處理Promise的常用方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
一、什么是Promise
一個(gè) Promise 是一個(gè)代理，它代表一個(gè)在創(chuàng)建 promise 時(shí)不一定已知的值。它允許你將處理程序與異步操作的最終成功值或失敗原因關(guān)聯(lián)起來(lái)。
二、Promise的三種狀態(tài)
- 待定（pending）：初始狀態(tài)，既沒(méi)有被兌現(xiàn)，也沒(méi)有被拒絕。
- 已兌現(xiàn)（fulfilled）：意味著操作成功完成。
- 已拒絕（rejected）：意味著操作失敗。
我們?cè)谑褂肞romise時(shí)，可以用resolve, reject兩個(gè)函數(shù)來(lái)控制其狀態(tài)，前者時(shí)通過(guò)，后者是拒絕
三、用Promise處理并發(fā)的常用方法
1.Promise.all()
在所有傳入的 Promise 都被兌現(xiàn)時(shí)兌現(xiàn)；在任意一個(gè) Promise 被拒絕時(shí)拒絕。
案例展示：
（1）全部都通過(guò)
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)
})結(jié)果：
（2）有一個(gè)拒絕
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)
})結(jié)果：
（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)
})結(jié)果：
2.Promise.allSettled()
在所有的 Promise 都被敲定時(shí)兌現(xiàn)。
案例展示：
（1）全部通過(guò)
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)
})結(jié)果：
（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)
})結(jié)果：
（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)
})結(jié)果：
3.Promise.any()
在任意一個(gè) Promise 被兌現(xiàn)時(shí)兌現(xiàn)；僅在所有的 Promise 都被拒絕時(shí)才會(huì)拒絕。
案例展示：
（1）全部通過(guò)
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)
})結(jié)果：
注意函數(shù)觸發(fā)時(shí)間
（2）部分不通過(guò)
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)
})結(jié)果：
（3）全部不通過(guò)
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)
})結(jié)果：
4.Promise.race()
在任意一個(gè) Promise 被敲定時(shí)敲定（即第一個(gè)）。
案例展示：
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)
})結(jié)果：
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)
})結(jié)果：
總結(jié)
到此這篇關(guān)于JavaScript同步異步處理Promise的常用方法的文章就介紹到這了,更多相關(guān)JS同步異步處理Promise內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
微信小程序下面商品左右滑動(dòng)上面tab也跟隨變動(dòng)功能實(shí)現(xiàn)
這篇文章主要介紹了小程序下面商品左右滑動(dòng)上面tab也跟隨變動(dòng)功能,也就是點(diǎn)擊tab切換下面的商品信息，滑動(dòng)下面的商品信息tab也進(jìn)行切換，本文給大家分享實(shí)現(xiàn)代碼，需要的朋友可以參考下2022-07-07
javascript 通用簡(jiǎn)單的table選項(xiàng)卡實(shí)現(xiàn)
鑒于UI妹妹每次交付過(guò)來(lái)的選項(xiàng)卡都夾帶了多多少少的js，而且每遇到選項(xiàng)卡就加一點(diǎn)js，造成垃圾低劣代碼逐漸堆積過(guò)多了，一直想做一個(gè)通用簡(jiǎn)潔的選項(xiàng)卡庫(kù)。2010-05-05
javascript Blob對(duì)象實(shí)現(xiàn)文件下載
這篇文章主要為大家介紹了vue組件通信的幾種方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
JavaScript正則表達(dá)式之選擇、分組與引用深度解析
正則表達(dá)式是非常重要的技術(shù),它不僅僅只局限于java語(yǔ)言,不管是任何一種成型的語(yǔ)言,都會(huì)有正則,這篇文章主要介紹了JavaScript正則表達(dá)式之選擇、分組與引用的相關(guān)資料,需要的朋友可以參考下2026-01-01
Blob對(duì)象實(shí)現(xiàn)文件上傳下載示例詳解
這篇文章主要為大家介紹了Blob對(duì)象實(shí)現(xiàn)文件上傳下載示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
實(shí)例詳解JSON數(shù)據(jù)格式及json格式數(shù)據(jù)域字符串相互轉(zhuǎn)換
JSON(JavaScript Object Notation)是一種輕量級(jí)的數(shù)據(jù)交換格式。JSON采用完全獨(dú)立于語(yǔ)言的文本格式，這些特性使JSON成為理想的數(shù)據(jù)交換語(yǔ)言2016-01-01
JavaScript中獲取未知對(duì)象屬性的代碼，需要的朋友可以參考下。2011-04-04
JavaScript中你不知道的Object.entries用法
大家應(yīng)該都知道,Object.entries()方法返回一個(gè)給定對(duì)象自身可枚舉屬性的鍵值對(duì)數(shù)組，其排列與使用 for...in 循環(huán)遍歷該對(duì)象時(shí)返回的順序一致,這篇文章主要給大家介紹了關(guān)于JavaScript中你不知道的Object.entries用法的相關(guān)資料,需要的朋友可以參考下2021-10-10
詳解webpack的proxyTable無(wú)效的解決方案
這篇文章主要介紹了詳解webpack的proxyTable無(wú)效的解決方案，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
下面小編就為大家?guī)?lái)一篇JavaScript DOM 對(duì)象深入了解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07