【ES6】Promise.race的用法

Promise.race()方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例。

javascript 复制代码
const p = Promise.race([p1, p2, p3]);

上面代码中,只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p的回调函数。

Promise.race()方法的参数与Promise.all()方法一样,如果不是 Promise 实例,就会先调用下面讲到的Promise.resolve()方法,将参数转为 Promise 实例,再进一步处理。

javascript 复制代码
    let x = 10;

    let p1 = new Promise((resolve) => {
       
       setTimeout(()=>resolve("p1 hello" + x),2000);
    })
        .then((res) => {
            console.log(`p1 then 输出${res}`);
            return res;
        });

    let p2 = new Promise((resolve) => {
        setTimeout(()=> resolve("p2 hello" + x),2000);;
    })
        .then((res) => {
            console.log(`p2 then 输出${res}`);
            return res;
        });

    let p3 = new Promise((resolve) => {
        setTimeout(()=>resolve("p3 hello" + x),2000);;
    })
        .then((res) => {
            console.log(`p3 then 输出${res}`);
            return res;
        });

    let p4 = new Promise((resolve) => {
        setTimeout(()=>resolve("p4 hello" + x),2000);;
    })
        .then((res) => {
            console.log(`p4 then 输出${res}`);
            return res;
        });

    Promise.race([p1, p2, p3, p4])
        .then(result => console.log(result))
        .catch((e) => {
            console.log("f*cking man 报错了");
            console.log(e);
        });

输出结果:只输出最先改变状态的那个Promise的值

相关推荐
爱敲代码的小冰3 分钟前
js 时间的转换
开发语言·前端·javascript
AAA阿giao9 分钟前
深入理解 JavaScript 中的面向对象编程(OOP):从构造函数到原型继承
开发语言·前端·javascript·原型·继承·原型模式·原型链
加油乐1 小时前
css及js实现正反面翻转
前端·javascript·css
霁月的小屋1 小时前
Vue组件通信全攻略:从基础语法到实战选型
前端·javascript·vue.js
一个很帅的帅哥1 小时前
three.js和WebGL
开发语言·javascript·webgl
Hilaku1 小时前
为什么永远不要相信前端输入?绕过前端验证,只需一个 cURL 命令!
前端·javascript·安全
AndyGoWei2 小时前
pnpm 是什么,看这篇文章就够了
前端·javascript
zl0_00_02 小时前
isctf2025 部分wp
linux·前端·javascript
不一样的少年_2 小时前
WebTab等插件出事后:不到100行代码,带你做一个干净透明的新标签页
前端·javascript·浏览器
幸运小圣2 小时前
关于Vue 3 <script setup> defineXXX API 总结
前端·javascript·vue.js