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

相关推荐
2501_944521594 分钟前
Flutter for OpenHarmony 微动漫App实战:分享功能实现
android·开发语言·javascript·flutter·ecmascript
小小码农Come on22 分钟前
QPushButton QSS(一):按钮常用qss
前端·javascript·css·qt5
Booksort28 分钟前
React+js环境配置(极速版)
前端·javascript·react.js
幻云201039 分钟前
Next.js 之道:从入门到精通
前端·javascript·vue.js·人工智能·python
2501_944521591 小时前
Flutter for OpenHarmony 微动漫App实战:标签筛选功能实现
android·开发语言·前端·javascript·flutter
⑩-1 小时前
VUE3学习
前端·javascript·vue.js
Mr Xu_1 小时前
Vue 3 中使用 mitt 实现组件间通信的实践与解析
前端·javascript·vue.js
巧克力芋泥包1 小时前
Vue3 详情页跨页循环(上一条,下一条)导航功能实现
前端·javascript·vue.js
摘星编程2 小时前
React Native + OpenHarmony:BottomSheet联动效果实现
javascript·react native·react.js