脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS同步异步处理Promise

JavaScript同步异步处理Promise的常用方法

 更新时间：2025年06月17日 08:41:14   作者：星极天下第一  
Promise是JavaScript中用于异步处理的一种方式,一个Promise代表了一个可能会在将来完成的异步操作,这篇文章主要介绍了JavaScript同步异步处理Promise的常用方法,文中通过代码介绍的非常详细,需要的朋友可以参考下

一、什么是Promise

一个 Promise 是一个代理，它代表一个在创建 promise 时不一定已知的值。它允许你将处理程序与异步操作的最终成功值或失败原因关联起来。

二、Promise的三种状态

  • 待定（pending）：初始状态，既没有被兑现，也没有被拒绝。
  • 已兑现（fulfilled）：意味着操作成功完成。
  • 已拒绝（rejected）：意味着操作失败。

我们在使用Promise时，可以用resolve, reject两个函数来控制其状态，前者时通过，后者是拒绝

三、用Promise处理并发的常用方法

1.Promise.all()

在所有传入的 Promise 都被兑现时兑现；在任意一个 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 都被敲定时兑现。

案例展示：

（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 被兑现时兑现；仅在所有的 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)
        })

结果：

注意函数触发时间

（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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 你必须知道的Javascript知识点之"深入理解作用域链"的介绍

    你必须知道的Javascript知识点之"深入理解作用域链"的介绍

    本篇文章小编为大家介绍，你必须知道的Javascript知识点之"深入理解作用域链"的介绍。需要的朋友参考下
    2013-04-04
  • Ajax，UTF-8还是GB2312 eval 还是execScript

    Ajax，UTF-8还是GB2312 eval 还是execScript

    讨厌的东西。 关于Ajax获取HTML内容编码，与JavaScript载入脚本的动态执行问题。
    2008-11-11
  • JS中filter( )数组过滤器的使用

    JS中filter( )数组过滤器的使用

    这篇文章主要介绍了filter() 数组过滤的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-11-11
  • 将json转换成struts参数的方法

    将json转换成struts参数的方法

    下面小编就为大家带来一篇将json转换成struts参数的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • JS优化冗余代码的技巧分享

    JS优化冗余代码的技巧分享

    这篇文章主要为大家整理了18个JavaScript优化冗余代码的技巧，文中的示例代码简洁易懂，具有一定的借鉴价值，感兴趣的小伙伴可以了解一下
    2023-08-08
  • Javascript作用域和作用域链原理解析

    Javascript作用域和作用域链原理解析

    这篇文章主要介绍了Javascript作用域和作用域链原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-03-03
  • 再谈Javascript中的异步以及如何异步

    再谈Javascript中的异步以及如何异步

    大家都知道js是单线程的，执行起来是顺序的，在顺序的业务逻辑中当然没有问题，如果遇到可以并发执行的业务逻辑，再排队就很低级了！所以这里我们再来简单的谈谈JS中的异步以及如何异步。
    2016-08-08
  • 微信小程序前端源码逻辑和工作流

    微信小程序前端源码逻辑和工作流

    这篇文章主要介绍了微信小程序前端源码逻辑和工作流 的相关资料,本文还给大家提供了文本基本结构图和实例代码，非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-09-09
  • 微信小程序将页面按钮悬浮固定在底部的实现代码

    微信小程序将页面按钮悬浮固定在底部的实现代码

    这篇文章主要介绍了微信小程序将页面按钮悬浮固定在底部的实现代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-10-10
  • JavaScript浏览器选项卡效果

    JavaScript浏览器选项卡效果

    项目需要做了如下的东西，希望能给其他需要的同学们一点参考。
    2010-08-08

最新评论