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

目录
  • 前言
  • Promise.all
    • 介绍
    • 手写
  • Promise.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方法的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • JS使用Promise时常见的5个错误总结

    目录 1.避免 Promise 地狱 2.在 Promise 中使用 try/catch 块 3.在 Promise 块内使用异步函数 4.在创建 Promise 后立即执行 Promise 块 5.不一定使用 Promise.all() 方法 总结 Promise 提供了一种优雅的方法来处理 JS 中的异步操作.这也是避免“回调地狱”的解决方案.然而,并没有多少开发人员了解其中的内容.因此,许多人在实践中往往会犯错误. 在本文中,介绍一下使用 promise 时的五个常见错误,希望大家能够避免

  • JavaScript模拟实现Promise功能的示例代码

    模拟Promise的功能,  按照下面的步骤,一步一步 1. 新建是个构造函数 2. 传入一个可执行函数 函数的入参第一个为 fullFill函数 第二个为 reject函数: 函数立即执行, 参数函数异步执行 3. 状态一旦更改就不可以变更 只能 pending => fulfilled 或者 pending => rejected 4. then 的时候要处理入参的情况 successCallback 和failCallback 均可能为非函数 默认的 failCallback 一定要将异

  • 捕获未处理的Promise错误方法

    为了保证可读性,本文采用意译而非直译,并且对源代码进行了大量修改.另外,本文版权归原作者所有,翻译仅用于学习. 使用Promise编写异步代码时,使用reject来处理错误.有时,开发者通常会忽略这一点,导致一些错误没有得到处理.例如: function main() { asyncFunc() .then(···) .then(() => console.log('Done!')); } 由于没有使用catch方法捕获错误,当asyncFunc()函数reject时,抛出的错误则没有被处理.

  • 详解JavaScript如何实现一个简易的Promise对象

    目录 前言 Promise的基础结构与用法 使用class类实现promise对象 写在最后 前言 实现一个简易的Promise对象,我们首先要了解几个相关的知识点: Promise对象的状态: pending(进行中).fulfilled(已成功)和rejected(已失败).只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态.这也是Promise这个名字的由来,它的英语意思就是“承诺”,表示其他手段无法改变. Promise的参数: Promise构造函数接收一个函

  • Promise抛出错误解决基础示例详解

    目录 then catch finally Promise.resolve Promise.reject then then 函数的会接收两个回调函数,一个是 onFulfilled 函数,一个是 onRejected 函数 如果这两个回调函数没有写返回值,默认会 return undefined; 进入下一个函数的 onFulfilled 函数中 const p = new Promise((resolve, reject) => { resolve(22); }); p.then( (suc

  • JavaScript面试必考之实现手写Promise

    目录 Promise手写 框架 完整代码 测试 resolve reject Promise手写 Promise作为面试必考题,Promise的手写也是面试官必问的问题,所以对于Promise我们一定要了解透彻 框架 (function(window) { MyPromise.prototype.then = function (onResolved, onRejected) {} MyPromise.prototype.catch = function (onRejected) {} func

  • JavsScript中Promise的错误捕获详解

    目录 我们需要在异步任务中准确的进行错误捕获,以便我们可以知道错误出在什么地方 我们再讨论then方法中的第二个参数和Promise.catch方法的区别 题: then方法的连续调用,怎么能够知道是第几个then方法报错了呢. 总结 我们需要在异步任务中准确的进行错误捕获,以便我们可以知道错误出在什么地方 如果对Promise和trycatch不够理解的话,很多时候会出现Promise中的错误无法被捕获的情况,本文来讨论这些情况 try catch try catch 只能捕获当前上下文中的错

  • Promise 链式调用原理精简示例

    目录 前言 代码 经典案例 解析 第一步 第二步 分析说明,此过程需结合上文中的案例一起阅读 总结 前言 在面试的过程中,总有一些面试官会问你,手写一个简易版的Promise得行不,得行的话就写一个出来看看,啪一哈,就把纸和笔给了你. 我们思索半天就写出来了个下面这个. 哦豁,高薪张开了它的翅膀,远离了我们. class Promise { constructor (resolve, reject) {} resolve () {} reject (){} then () {} catch ()

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

    目录 前言 Promise.all 介绍 手写 Promise.race 介绍 手写 前言 在理解了手写promsie.then的方法后,再来看它的其他方法,感觉真的简单了不少. Promise.all 介绍 Promise.all()方法用于将多个 Promise 实例,包装成一个新的 Promise 实例. const p = Promise.all([p1, p2, p3]); 上面代码中,Promise.all()方法接受一个数组作为参数,p1.p2.p3都是 Promise 实例.另外

  • vue时间组件DatePicker组件的手写示例

    vue时间组件DatePicker组件的手写示例

    概述 在日常工作中,比不可少会用到时间组件,我们的第一反应就是直接到组件库去找一下现成的来用下,毕竟,时间组件看起来还是很复杂的,对于没接触过的人来说,要自己去写一个这样的组件出来,还是有难度的,但是作为一名前端开发,这么常见的组件,我们还是值得取自己写一个这样的组件的,现在就手把手带你实现vue中的DatePicker组件.看完不会找我. 前置知识 在开始写代码之前,建议代价先看看时间组件的布局,目前主流的组件库iview ,element等提供的时间组件布局都基本类似,功能也差不多,因此在这

  • JS前端html2canvas手写示例问题剖析

    目录 前言 感性认识 第一步:解析 dom 树 第二步:按层叠规则分组(重点) 第三步:创建画布 第四步:渲染 另一种方法(html->svg->canvas) 结语 前言 这两天把 html2canvas 这玩意抽丝剥茧了一下,搞了个勉强能跑的小 demo,麻雀虽小五脏俱全,来看看实现的效果吧(跟基金一样的绿,离离原上谱)

  • JavaScript手写call,apply,bind方法

    目录 前言 改写this实现思路 前期准备 手写call方法 手写apply方法 手写bind方法 前言 改变this指向在书写业务的时候经常遇到,我们经常采用以下方法进行改写 使用作用声明变量存储this 使用jJavaScript的原生方法call,apply,以及bind进行改写 第一种方法就不说了,就是一个变量存储的问题,主要说第二种如何实现的 call,bind,apply方法都是JavaScript原生的方法,挂载在Function原型上,使得所有函数都可以调用,今天我们来实现一下c

  • 前端面试JavaScript高频手写大全

    前端面试JavaScript高频手写大全

    目录 1. 手写instanceof 2. 实现数组的map方法 3. reduce实现数组的map方法 4. 手写数组的reduce方法 5. 数组扁平化 5. 1 es6提供的新方法 flat(depth) 5.2 利用cancat 6. 函数柯里化 7. 浅拷贝和深拷贝的实现 7.1浅拷贝和深拷贝的区别 8. 手写call, apply, bind 8.1 手写call 8.2 手写apply(arguments[this, [参数1,参数2.....] ]) 8.3 手写bind 9.

  • 详解JavaScript异步编程中jQuery的promise对象的作用

    Promise, 中文可以理解为愿望,代表单个操作完成的最终结果.一个Promise拥有三种状态:分别是unfulfilled(未满足的).fulfilled(满足的).failed(失败的),fulfilled状态和failed状态都可以被监听.一个愿望可以从未满足状态变为满足或者失败状态,一旦一个愿望处于满足或者失败状态,其状态将不可再变化.这种"不可改变"的特性对于一个Promise来说非常的重要,它可以避免Promise的状态监听器修改一个Promise的状态导致别的监听器的行

  • 面试手写实现Promise.all

    面试手写实现Promise.all

    目录 前言 常见面试手写系列 Promise.resolve 简要回顾 源码实现 Promise.reject 简要回顾 源码实现 Promise.all 简要回顾 源码实现 Promise.allSettled 简要回顾 源码实现 Promise.race 简单回顾 源码实现 结尾 前言 (ಥ﹏ಥ)曾经真实发生在一个朋友身上的真实事件,面试官让他手写一个Promise.all,朋友现场发挥不太好,没有写出来,事后他追问面试官给的模糊评价是基础不够扎实,原理性知识掌握较少... 当然整场面试失利

  • 如何从零开始利用js手写一个Promise库详解

    前言 ECMAScript 是 JavaScript 语言的国际标准,JavaScript 是 ECMAScript 的实现.ES6 的目标,是使得 JavaScript 语言可以用来编写大型的复杂的应用程序,成为企业级开发语言. 概念 ES6 原生提供了 Promise 对象. 所谓 Promise,就是一个对象,用来传递异步操作的消息.它代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个事件提供统一的 API,可供进一步处理. 三道思考题 刚开始写前端的时候,处理异步请求经常用

  • 万字详解JavaScript手写一个Promise

    万字详解JavaScript手写一个Promise

    目录 前言 Promise核心原理实现 Promise的使用分析 MyPromise的实现 在Promise中加入异步操作 实现then方法的多次调用 实现then的链式调用 then方法链式调用识别Promise对象自返回 捕获错误及 then 链式调用其他状态代码补充 捕获执行器错误 捕获then中的报错 错误与异步状态的链式调用 将then方法的参数变成可选参数 Promise.all方法的实现 Promise.resolve方法的实现 finally方法的实现 catch方法的实现 完整

  • JavaScript手写异步加法asyncAdd方法详解

    目录 前言 分析 asyncAdd 直观的基本要求 隐藏的考察点 — setTimeout & cb 隐藏的考察点 — async & await 实现 asyncAdd 具体实现 进行优化 抽离内层函数 缓存计算结果 前言 在掘金上发现一道既简单但个人觉得还挺有意思的一道题,题目如下: // 异步加法 function asyncAdd(a,b,cb){ setTimeout(() => { cb(null, a + b) }, Math.random() * 1000) } as

随机推荐