首页 > 编程语言 >源码共读 | axios 工具函数

源码共读 | axios 工具函数

时间:2023-04-15 10:36:49浏览次数:49  
标签:axios obj 函数 对象 共读 Object 源码 kindOf const

前言

Axios 是一个非常流行的库,它可以让你简单、方便地发送 HTTP 请求。它可以用在浏览器和 node.js 中,并且支持跨域请求。在 Github 上拥有快接近 10w 颗星了,可见其受欢迎程度。下面就来学习一下axios工具函数的源码。

准备工作

将项目克隆到本地后,安装依赖,执行:

npm start

打开浏览器访问 axios|Sandbox 页面,在浏览器的开发者模式下调试代码,如图:

image.png

工具函数概览

axios 的源码中提供了如下46个工具函数:

export default {
  isArray, 
  isArrayBuffer,
  isBuffer,
  isFormData,
  isArrayBufferView,
  isString,
  isNumber,
  isBoolean,
  isObject,
  isPlainObject,
  isUndefined,
  isDate,
  isFile,
  isBlob,
  isRegExp,
  isFunction,
  isStream,
  isURLSearchParams,
  isTypedArray,
  isFileList,
  forEach,
  merge,
  extend,
  trim,
  stripBOM,
  inherits,
  toFlatObject,
  kindOf,
  kindOfTest,
  endsWith,
  toArray,
  forEachEntry,
  matchAll,
  isHTMLForm,
  hasOwnProperty,
  hasOwnProp: hasOwnProperty, // an alias to avoid ESLint no-prototype-builtins detection
  reduceDescriptors,
  freezeMethods,
  toObjectSet,
  toCamelCase,
  noop,
  toFiniteNumber,
  findKey,
  global: _global,
  isContextDefined,
  toJSONObject
};

大致可分为以下几类:

  • 类型判断
  • 数据转换
  • 数据查询

下面将挑选不同类别的几个工具函数进行解析。

源码解析

kindOf

const {toString} = Object.prototype;
const {getPrototypeOf} = Object;

const kindOf = (cache => thing => {
    const str = toString.call(thing);
    return cache[str] || (cache[str] = str.slice(8, -1).toLowerCase());
})(Object.create(null));

KindOf 函数是一个用于确定 JavaScript 值类型的实用工具。它使用 toString 方法获取值类型的字符串表示形式,然后将该字符串映射到更易读的类型名称。该函数使用一个缓存对象来存储映射的类型名称.

下面是一个如何使用 kindOf 函数的示例:

kindOf(123); // 'number'
kindOf('hello world'); // 'string'
kindOf(true); // 'boolean'
kindOf([1, 2, 3]); // 'array'
kindOf({ name: 'John Doe' }); // 'object'

需要注意的是,kindOf 函数只用于确定基本值(如数字、字符串和布尔值)的类型和一些内置类型(如数组和对象)。

forEach

/**
 * Iterate over an Array or an Object invoking a function for each item.
 *
 * If `obj` is an Array callback will be called passing
 * the value, index, and complete array for each item.
 *
 * If 'obj' is an Object callback will be called passing
 * the value, key, and complete object for each property.
 *
 * @param {Object|Array} obj The object to iterate
 * @param {Function} fn The callback to invoke for each item
 *
 * @param {Boolean} [allOwnKeys = false]
 * @returns {any}
 */
function forEach(obj, fn, {allOwnKeys = false} = {}) {
  // Don't bother if no value provided
  if (obj === null || typeof obj === 'undefined') {
    return;
  }

  let i;
  let l;

  // Force an array if not already something iterable
  if (typeof obj !== 'object') {
    /*eslint no-param-reassign:0*/
    obj = [obj];
  }

  if (isArray(obj)) {
    // Iterate over array values
    for (i = 0, l = obj.length; i < l; i++) {
      fn.call(null, obj[i], i, obj);
    }
  } else {
    // Iterate over object keys
    const keys = allOwnKeys ? Object.getOwnPropertyNames(obj) : Object.keys(obj);
    const len = keys.length;
    let key;

    for (i = 0; i < len; i++) {
      key = keys[i];
      fn.call(null, obj[key], key, obj);
    }
  }
}

手动实现了一个forEach循环,接收三个参数,第一个参数是所要遍历的对象,可以是数组或者是一个对象,第二个参数是每个参数所要执行的函数。

当遍历的是个对象时,第三个参数,用于标识,是使用 Object.getOwnPropertyNames(obj) 还是 Object.keys(obj) 获取对象的键,他们的区别在于 getOwnPropertyNames 能够获取对象的不可枚举属性。

toJSONObject

源码:

const toJSONObject = (obj) => {
  const stack = new Array(10);

  const visit = (source, i) => {

    if (isObject(source)) {
      if (stack.indexOf(source) >= 0) {
        return;
      }

      if(!('toJSON' in source)) {
        stack[i] = source;
        const target = isArray(source) ? [] : {};

        forEach(source, (value, key) => {
          const reducedValue = visit(value, i + 1);
          !isUndefined(reducedValue) && (target[key] = reducedValue);
        });

        stack[i] = undefined;

        return target;
      }
    }

    return source;
  }

  return visit(obj, 0);
}

这是一个将对象转换为 JSON 格式的方法。

toJSONObject 函数接受一个对象,使用递归遍历输入对象的 vist 函数。vist 函数检查对象中的每个值是否是对象,如果是,则将其添加到堆栈中。如果对象具有 toJSON 属性,则不将其添加到堆栈中。否则,该函数将创建一个新的 JavaScript 对象,并使用输入对象的属性和值填充该对象。如果属性值是一个对象,则递归地调用 vist 函数来处理该值。这个过程一直持续到处理完输入中的所有对象并将其添加到结果 JavaScript 对象为止。

总结

很多工具函数在功能和实现上都大同小异,不同的是要根据自己的目的和需求去编写工具函数,同时我们在开发中也要多总结思考,不能只是照搬别人的代码,可以参考优秀的源码再结合自己实际的需求,创造自己的工具函数。

标签:axios,obj,函数,对象,共读,Object,源码,kindOf,const
From: https://blog.51cto.com/codeniu/6192223

相关文章

  • Go For Web:Golang http 包详解(源码剖析)
    前言:本文作为解决如何通过Golang来编写Web应用这个问题的前瞻,对Golang中的Web基础部分进行一个简单的介绍。目前Go拥有成熟的Http处理包,所以我们去编写一个做任何事情的动态Web程序应该是很轻松的,接下来我们就去学习了解一些关于Web的相关基础,了解一些概念,以及......
  • vue2源码-五、将模板编译解析成AST语法树1
    将模板编译成ast语法树complileToFunction方法vue数据渲染:template模板->ast语法树->render函数,模板编译的最终结果结果就是render函数。在complileToFunction方法中,生成render函数,需要以下两个核心步骤:通过parserHTML方法:将模板(template或html)内容编译成ast语法树通过co......
  • 未来源码|什么是数据集成?超全的SeaTunnel 集成工具介绍
    以下文章来源于大数据与云原生技术分享,作者liugp推荐语:随着互联网流量爆发式增长,越来越多的公司业务需要支撑海量数据存储,对高并发、高可用、高可扩展性等特性提出了更高的要求。这也促使各种类型的数据库快速发展,至今常见数据库已经达到200多个。与之相伴的便是,各种数据库之间......
  • Spring很常用的@Conditional注解的使用场景和源码解析
    你好,我是刘牌!介绍今天要分享的是Spring的注解@Conditional,@Conditional是一个条件注解,它的作用是判断Bean是否满足条件,如果满足条件,则将Bean注册进IOC中,如果不满足条件,则不进行注册,这个注解在SpringBoot中衍生出很多注解,比如@ConditionalOnProperty,@ConditionalOnBean,@Conditi......
  • centos 升级内核版本(源码)
    查看内核版本号:username-r 或者username-a  1、安装依赖yuminstall-ygccmakegitctagsncurses-developenssl-develyuminstall-ybisonflexelfutils-libelf-develbc如果担心依赖问题不够新,可以在执行:yum-yupgrade,更新操作系统上的所有依赖 2......
  • c# 计算器2.0源码
      主要时间浪费在 //执行计算objectresult=newDataTable().Compute(s,"");这条语句上。如果不加处理,特别大的整数相乘,会提示值太大。只好将整数加个0变为小数;usingSystem;usingSystem.Collections.Generic;usingSystem.ComponentModel;......
  • 互联网医院源码|互联网医院软件体现智慧医疗的优势
    现在大家看病一般都会直接在互联网医院平台上去就诊,每次大家需要看病时,可以在手机上直接去预约指定的医生,同城周边的所有医院都是可以去直接选择的,这样也可以去帮助大家节省很多的看病时间,在互联网医院软件中所具备的功能一般都是比较齐全的,那么互联网医院源码开发功能特色你了解吗......
  • Overlay fs联合文件系统源码解析系列(一)挂载过程详解
    作者:蒋卫峰钟文清<br>引言分析Overlayfs联合文件系统源自于培养OpenHarmony高端人才的动机,通过讲Overlayfs联合文件系统移植到Liteos_A内核的项目培养一批精通OpenHarmony内核的人才,也通过本文向各位热爱OpenHarmony内核的技术开发者和爱好者叙说一个复杂文件系统的具体实现......
  • axios实现无感刷新token
    letisRefreshing=false标识当前正在刷新token//重试队列,每一项将是一个待执行的函数形式letrequests=[]axios.interceptors.response.use(response=>{const{code}=response.dataif(code===401){//具体code看和后端定义的是什么,这里是401co......
  • melange 基于源码构建apk 包的工具
    实际上melange是apko的相关项目,结合起来可以更好的创建基于apk的oci镜像,melange主要是定义了一套pipeline可以方便的进行apk包开发安装可以基于docker运行 goinstallchainguard.dev/melange@latest使用配置package:name:h......