脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Promise对象all race方法

Promise对象all与race方法手写示例

 更新时间：2022年12月11日 10:13:28   作者：大眼睛图图  
这篇文章主要为大家介绍了Promise对象all与race方法手写示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

前言

在理解了手写promsie.then的方法后，再来看它的其他方法，感觉真的简单了不少。

Promise.all

介绍

Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

  const p = Promise.all([p1, p2, p3]);

上面代码中，Promise.all()方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例。另外，Promise.all()方法的参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例。

p的状态由p1、p2、p3决定，分成两种情况。

（1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。

（2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

手写

  • 返回一个Promsie对象
const promiseAll = (array) => {
    return new Promise((resolve, reject) => {
    })
}
  • 判断传入的是数组
const promiseAll = (array) => {
    if (!Array.isArray(array)) {
        throw new Error('要传入数组')
    }
    return new Promise((resolve, reject) => {
    }
}
  • 遍历数组，再判断数组中每个元素是否为Promsie对象的实例，并对此分情况处理
const promiseAll = (array) => {
    if (!Array.isArray(array)) {
        throw new Error('要传入数组')
    }
    return new Promise((resolve, reject) => {
        let result = [];
        array.forEach((item, index) => {
            if (item instanceof Promise) {
                item.then(res => {
                    result[index] = res
                },
                    err => { return reject(err) })
            } else {
                result[index] = item
            }
        })
    })
}
  • 设置一个计数器count,当遍历完了所有数组里面的值，就把result数组打印出来
const promiseAll = (array) => {
    if (!Array.isArray(array)) {
        throw new Error('要传入数组')
    }
    return new Promise((resolve, reject) => {
        let result = [];
        let count = 0;
        array.forEach((item, index) => {
            if (item instanceof Promise) {
                item.then(res => {
                    result[index] = res
                    count++;
                    if (count == array.length) {
                        return resolve(result)
                    }
                },
                    err => { return reject(err) })
            } else {
                result[index] = item
                count++;
                if (count == array.length) {
                    return resolve(result)
                }
            }
        })
    })
}

Promise.race

介绍

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

const p = Promise.race([p1, p2, p3]);

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

手写

  • 返回一个Promise对象
let promiseRace = (array) => {
    return new Promise((resolve, reject) => {
    })
}
  • 判断传入的参数是否为数组
let promiseRace = (array) => {
    if (!Array.isArray(array)) {
        throw new Error('要返回数组')
    }
    return new Promise((resolve, reject) => {
    })
}
  • 遍历数组，再判断数组中每个元素是否为Promsie对象的实例,再对此分情况处理
let promiseRace = (array) => {
    if (!Array.isArray(array)) {
        throw new Error('要返回数组')
    }
    return new Promise((resolve, reject) => {
        array.forEach((item) => {
            if (item instanceof Promise) {
                item.then(res => {
                    return resolve(res)
                },
                    err => reject(err))
            } else {
                return resolve(item)
            }
        })
    })
}

参考文档

Promise 对象 - Promise.any()

以上就是Promise对象all与race方法手写示例的详细内容，更多关于Promise对象all race方法的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • JS算法题之查找数字在数组中的索引位置

    JS算法题之查找数字在数组中的索引位置

    这篇文章主要给大家介绍了关于JS算法题之查找数字在数组中的索引位置的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JS具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-05-05
  • js showModalDialog参数的使用详解

    js showModalDialog参数的使用详解

    本篇文章主要是对js中showModalDialog参数的使用进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-01-01
  • Javascript 刷新全集常用代码

    Javascript 刷新全集常用代码

    Javascript刷新页面实现代码，需要的朋友可以参考下。
    2009-11-11
  • ES6知识点整理之Proxy的应用实例详解

    ES6知识点整理之Proxy的应用实例详解

    这篇文章主要介绍了ES6知识点整理之Proxy的应用,结合实例形式详细分析了ES6中Proxy的功能、原理、使用方法及相关操作注意事项,需要的朋友可以参考下
    2019-04-04
  • uniapp存储数据到本地文件及读取本地文件数据代码示例

    uniapp存储数据到本地文件及读取本地文件数据代码示例

    这篇文章主要给大家介绍了关于uniapp存储数据到本地文件及读取本地文件数据的相关资料,在开发uniapp应用时,我们常常需要使用本地存储来保存一些数据,比如用户登录信息、设置项等,本文通过代码介绍的非常详细,需要的朋友可以参考下
    2023-09-09
  • javascript ajax 仿百度分页函数

    javascript ajax 仿百度分页函数

    百度分页想必大家都知道吧，浏览网页的朋友都应该知道，下面有个小例子使用到了js、ajax等来模仿百度的分页，感兴趣的朋友可以参考下
    2013-10-10
  • JavaScript 拷贝赋值的具体使用

    JavaScript 拷贝赋值的具体使用

    在JavaScript编程中,经常会涉及到对象赋值和拷贝的操作,本文主要介绍了JavaScript 拷贝赋值的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-08-08
  • js鼠标经过tab选项卡时实现切换延迟

    js鼠标经过tab选项卡时实现切换延迟

    这篇文章主要为大家详细介绍了js鼠标经过tab选项卡时实现切换延迟效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 微信小程序引入模块中wxml、wxss、js的方法示例

    微信小程序引入模块中wxml、wxss、js的方法示例

    这篇文章主要介绍了微信小程序引入模块中wxml、wxss、js的方法示例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • JavaScript实现多个物体同时运动

    JavaScript实现多个物体同时运动

    这篇文章主要为大家详细介绍了JavaScript实现多个物体同时运动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-03-03

最新评论