这些个 axios 工具函数,你都掌握了吗【第二弹】

lxf2023-04-13 20:00:02

我正在参与AdminJS会员专属活动-源码共读第一期,点击参与

前言

本来在周末应该将axios的剩下一些阅读笔记整理出来,但是由于手头上工作项目的问题而导致耽误了。不过问题不大,该来的总会来,第二弹就这样“延期而至”。

源码阅读

由于上周已经阅读过一部分axios源码,我已经对它有了一定了解,所以这次会比较轻松一点。它里面包含了很多工具,值得我们花时间去阅读。上周介绍了比较陌生的函数,这次来介绍一些常用的工具函数。

isDate

function isDate(val) {
    return toString.call(val) === "[object Date]"; 
}

这个函数借助 toString() 判断属性类型的性质判断 val 是否为日期类型。

isFile

function isFile(val) {
    return toString.call(val) === "[object File]"; 
}

isDate 一样,都是借助了 toString() 来判断属性类型。其实看了剩下的关于判断类型的工具函数,不难发现都是使用 toString()

isFunction

function isFunction(val) {
    return toString.call(val) === "[object Function]"; 
}

通过 toString() 判断属性类型的性质判断 val 是否为函数类型。

isNumber

function isNumber(val) {
    return typeof val === "number"; 
}

这个则是通过 typeof 来判断是否为 number 类型

isObject

function isObject(val) {
    return val !== null && typeof val === "object"; 
}

它会判断传入值是否是普通对象,通过排除掉 null 类型之外的所有对象类型。

forEach

function forEach(obj, fn) {
    if (obj === null || typeof obj === "undefined") {
        return;
    }
    if (typeof obj !== "object") {
        obj = [obj];
    }
    if (isArray(obj)) {
        for (var i = 0, l = obj.length; i < l; i++) {
            fn.call(null, obj[i], i, obj);
        }
    } else {
        for (var key in obj) {
            if (Object.prototype.hasOwnProperty.call(obj, key)) {
                fn.call(null, obj[key], key, obj);
            }
        }
    }
}

我们经常使用的 forEach 函数的代码如上所示。我们来理一理它的逻辑。如果是 nullundefined 则直接返回。如果是 Array 类型就开始循环遍历。如果是 Object 类型则使用 hasOwnProperty() 方法来进行遍历。这就是 forEach 的内部实现流程逻辑。并不难理解,很容易看明白。

extend

function extend(a, b, thisArg) {
    forEach(b, function assignValue(val, key) {
        if (thisArg && typeof val === "function") {
            a[key] = bind(val, thisArg);
        } else {
            a[key] = val;
        }
    });
    return a;
}

可以因名思其功能,它的中文意思是扩展,因此它有着扩展的功能,用于扩展对象。通俗点理解就是它可以将 a 的所有属性扩展到 b 上。

总结

以上就是我这次研究的剩下的一些工具函数了,这次我是第二次阅读 axios 的工具函数库源码,又加深了一遍印象。通过这次阅读,我也发现了 axios 的工具函数大部分都是用于判断各种数据类型。这些方法都可以在项目直接参考使用。

最后,源码阅读是个漫长的过程,需要慢慢研读。阅读源码的过程可以获到很多额外知识。

上期回顾:这些个 axios 工具函数,你都掌握了吗