面试官桀桀一笑:请手写一个Promise.all(判断是不是Promise、js抛出错误)

前言

  • 本文如标题,回顾三个知识点
  • 判断是不是Promise
  • js抛出错误的类型
  • 手写Promise.all

判断是不是Promise

方式一 Object.prototype.toString.call

代码如下:

js 复制代码
// p存在,且对象原型上是Promise
function isPromise(p) {
    return p && Object.prototype.toString.call(p) === "[object Promise]";
}

方式二 Promise有.then方法,以此为依据

代码如下:

js 复制代码
// 有值,且值是对象或函数,在一个也要有.then的函数方法
function isPromise(val) {
    return (
        val &&
        (typeof val === 'object' || typeof val === 'function') &&
        typeof val.then === 'function'
    );
}

二者对比

  • 方式二比方式一更为精准强大(推荐)
  • 对于规范化的Promise(就是JavaScript自带的Promise)
  • 二者判断检测结果能力都一样
  • 但是对于一些特定的Promise可能不太准确
  • 比如:特定库的Promise(Tiny Promise)、或者自己继承Promise去操作什么的,可能不太够用
  • 不过正常来说也够用了

js如何抛出错误?

  • 在js中抛错是通过throw语句,进一步来说,又可以分为:
  • 直接抛
  • 进阶抛

直接抛错误

throw语句后面抛什么都行,比如:

js 复制代码
    // 抛出各种数据类型
    throw '报错了' 

    throw 404

    throw false

    throw null

    throw undefined

    throw {}

    throw () => {}

    throw []

一般来说,抛出字符串比较多一些,不会抛出各种其他的数据类型

进阶抛错误

  • 如果想要进一步明确错误的类型
  • 可以使用js自带的Error相关构造函数
  • 一般常见的有4个如下:
js 复制代码
// 常见的4种进阶错误区分
throw new Error('普通错误') // 抛出普通错误(用的多一些)

throw new SyntaxError('语法错误') // 抛出语法错误

throw new ReferenceError('引用错误') // 抛出引用错误

throw new RangeError('范围错误') // 抛出范围错误

工作中我们根据具体的情况和需求,选择合适的方式来抛出错误能处理异常更加"优雅"

手写一个Promise.all

复制粘贴即用,注释代码:

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.0/axios.js"></script>
</head>

<body>
    <script>
        // 判断是不是Promise
        function isPromise(p) {
            return p && Object.prototype.toString.call(p) === "[object Promise]";
        }

        function myPromiseAll(promises) {
            return new Promise((resolve, reject) => {
                if (!Array.isArray(promises)) {
                    throw new TypeError('接收的必须是数组,不是数组抛错');
                }
                if (promises.length === 0) {
                    throw new Error('接收的数组不能为空,空数组也抛错');
                }
                // Promise.all接收数组,最终也返回数组,result存起来用于返回
                const result = [];
                // 已经完成的数量,初始为0
                let doneNum = 0;
                // 数组循环执行
                promises.forEach((promise, index) => {
                    if (!isPromise(promise)) { throw new TypeError('接收的数组中的每一项都必须要是Promise') }
                    promise
                        .then((val) => {
                            result[index] = val; // 顺序存值
                            // result.push(val); // 非顺序存值
                            doneNum = doneNum + 1; // 已完成数量+1
                            if (doneNum === promises.length) { resolve(result) } // 任务全部完成,resolve出去
                        })
                        .catch((err) => {
                            // 只要有一个Promise失败,立刻拒绝返回Promise
                            reject(err);
                        })
                });
            });
        }

        const p1 = function () {
            return new Promise(async (resolve, reject) => {
                let res = await axios.get('http://ashuai.work/api/getIdName?id=1')
                resolve(res)
            })
        }
        const p2 = function () {
            return new Promise(async (resolve, reject) => {
                let res = await axios.get('http://ashuai.work/api/getIdName?id=2')
                resolve(res)
            })
        }
        const p3 = function () {
            return new Promise(async (resolve, reject) => {
                let res = await axios.get('http://ashuai.work/api/getIdName?id=3')
                resolve(res)
            })
        }

        myPromiseAll([p1(), p2(), p3()])
            .then((values) => { console.log(values) })
            .catch((error) => { console.error(error) })

    </script>
</body>

</html>

手写Promise... 未完待续...

相关推荐
又是忙碌的一天几秒前
前端学习 JavaScript(2)
前端·javascript·学习
2501_915106322 分钟前
JavaScript编程工具有哪些?老前端的实用工具清单与经验分享
开发语言·前端·javascript·ios·小程序·uni-app·iphone
GISer_Jing2 分钟前
计算机基础——浏览器、算法、计算机原理和编译原理等
前端·javascript·面试
蓝瑟10 分钟前
React 项目实现拖拽排序功能,如何在众多库中选对 “它”
前端·javascript·react.js
Rhys..13 分钟前
Cucumber自学导航
javascript·python·bdd·cucumber
小刘不知道叫啥1 小时前
React 源码揭秘 | 合成事件
前端·javascript·react.js
星秀日4 小时前
JavaWeb--Ajax
前端·javascript·ajax
嫂子的姐夫4 小时前
10-七麦js扣代码
前端·javascript·爬虫·python·node.js·网络爬虫
Komorebi_99995 小时前
Vue3 + TypeScript provide/inject 小白学习笔记
前端·javascript·vue.js
少吃一口都不行5 小时前
脚手架学习
前端·javascript·学习