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

相关推荐
吴声子夜歌11 小时前
JavaScript——字符串和正则表达式
开发语言·javascript·正则表达式
林恒smileZAZ11 小时前
JavaScript this绑定规则:告别踩坑指南!
开发语言·javascript·ecmascript
不会写DN11 小时前
从依赖到自主:手写一个 ICO 文件转换器
前端·javascript·typescript·node.js
Sylus_sui11 小时前
鸿蒙ArkUI状态管理全攻略
javascript
Highcharts.js11 小时前
Highcharts Grid Lite:企业免费表格数据的基本工具
前端·javascript·信息可视化·免费·highcharts·表格工具
程序员小李白11 小时前
Vue 组件通信 极简速记版
前端·javascript·vue.js
英俊潇洒美少年11 小时前
React 16 → 17 → 18 → 19 完整区别
前端·javascript·react.js
专注VB编程开发20年11 小时前
Typescript就像C#,VS IDE以前对JS只有基础、弱智能的支持
javascript·vscode·microsoft·typescript
533_11 小时前
[vxe-table el-tree] 树表格:选中子节点,父节点无影响;选中父节点,子节点被选中,el-tree也同理
前端·javascript·vue.js
阳光雨滴11 小时前
树级结构部门选择和人员选择联动功能处理
javascript·vue.js·elementui