【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的值

相关推荐
Yvette-W24 分钟前
【JavaScript】原型链 prototype 和 this 关键字的练习(老虎机)
开发语言·前端·javascript·ecmascript·原型模式
程序员JerrySUN32 分钟前
设计模式 Day 4:观察者模式(Observer Pattern)深度解析
javascript·观察者模式·设计模式
CsharpDev-奶豆哥1 小时前
使用JS+HTML+CSS编写提词器实例
javascript·css·html
在下千玦1 小时前
#关于require 与 import 相关了解
javascript·node.js
土豆丶杨2 小时前
vue3+electron 桌面应用初始化
javascript·vue.js·electron
冴羽2 小时前
SvelteKit 最新中文文档教程(18)—— 浅层路由和 Packaging
前端·javascript·svelte
墨渊君2 小时前
Expo 入门指南:让 React Native 开发更轻松(含环境搭建)
前端·javascript·react native
jane_xing3 小时前
Next.js + SQLite 项目 Docker 生产环境部署方案
javascript·docker·sqlite
Billy Qin3 小时前
Rollup详解
前端·javascript·rollup
前端小菜鸟一枚s4 小时前
`ConstantPositionProperty` 的使用与应用
前端·javascript·cesium