Promise的all方法和 race方法

有事没事敲代码

已于 2023-04-21 15:08:58 修改

阅读量202

点赞数

分类专栏：随记文章标签： javascript 开发语言 ecmascript

于 2023-04-21 01:26:11 首次发布

本文链接：https://blog.csdn.net/qq_46584225/article/details/130279178

版权

随记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Promise的all方法等待所有Promise实例都变为fulfilled状态，而race方法则在第一个Promise变为fulfilled或rejected状态时就结束。文章通过示例解释了这两个方法在处理异步任务时的不同应用场景，如页面加载和选择最快响应的服务。

摘要由CSDN通过智能技术生成

Promise的all方法和 race方法

Promise 是一个 ECMAScript 6 提供的类，目的是更加优雅地书写复杂的异步任务。

由于 Promise 是 es6 新增加的，所以一些旧的浏览器并不支持，苹果的 Safari 10 和 Windows 的 Edge 14 版本以上浏览器才开始支持 ES6 特性

Promise的三种状态：

Pending ：异步操作未完成
Fulfilled ：异步操作成功
Rejected ：异步操作失败

Promise特性：状态凝固特性只会取其一

我们暂且用setTimeout方法代替异步操作 😂

由于Promise的状态凝固特性，一旦先执行了上面的语句，那就不在执行下面的状态语句，因此Promise也可以说只有两种状态，成功或者失败

举个栗子 😄


let pro = new Promise(function (resolve, reject) {
        setTimeout(() => { 
            //  状态凝固特性 只会取其一
            resolve(1000) //执行这个
            reject（2000）
        }, 1000)
    })

    pro.then((res) => {
        console.log("奖励",res)
    }).catch(()=>{
        console.log("没有")
    })

    // 输出 奖励 1000

all方法

假设现在有一个需求，一个页面的不同页面区域返回加载所用的时间不同，那么我们在加载过程中就显示加载画面，直至全部页面都加载完成，再给用户呈现页面。

OK，举个栗子 😄


let pro1 = new Promise(function (resolve, reject) {
    setTimeout(() => {
        resolve(1000)
    }, 1000)
})

let pro2 = new Promise(function (resolve, reject) {
    setTimeout(() => {
        resolve(2000)
    }, 2000)
})

let pro3 = new Promise(function (resolve, reject) {
    setTimeout(() => {
        resolve(3000)
    }, 3000)
})

// shuowloading   显示页面加载动画

Promise.all([pro1,pro2,pro3]).then(res=>{

    // hideloading  隐藏页面加载动画

    console.log(res)

}).catch(err=>{
    console.error(err)
})

// 输出   (3) [1000, 2000, 3000]

race方法

哪个返回的最快，就执行哪个
假如说公司很有实力，部署了三台服务器，在此方法写三个服务的url，不同的用户访问，哪个响应的快就用哪个返回的结果

再举个栗子 😄 这是最后一个栗子了 😂


let pro1 = new Promise(function (resolve, reject) {
    setTimeout(() => {
        resolve(1000)
        reject(1)
    }, 1000)
})

let pro2 = new Promise(function (resolve, reject) {
    setTimeout(() => {
        resolve(2000)
    }, 2000)
})

let pro3 = new Promise(function (resolve, reject) {
    setTimeout(() => {
        resolve(3000)
    }, 3000)
})
        
Promise.race([pro1, pro2, pro3]).then(res => {
    // 
    console.log(res)
}).catch(err => {
    console.error(err)
})

// 输出 1000

文章如有错误，恳请大家提出问题，本人不胜感激。

文章对大家有帮助的话，希望大家能动手点赞鼓励，大家未来一起努力

祝诸位读者，天生我材必有用，千金散尽还复来