Axios 源码阅读-369IT编程

admin管理员组
文章数量:1027735

Axios 源码阅读

一、引言

在前端开发的世界里，网络请求是不可或缺的一环。Axios 作为一个强大且广受欢迎的 HTTP 客户端库，以其简洁的 API、强大的功能和良好的兼容性，成为了众多开发者的首选。而在 Axios 的源码中，utils.js 文件扮演着至关重要的角色，它提供了一系列通用的工具函数，这些函数贯穿整个 Axios 库，为其他模块的正常运行提供了坚实的基础。

本文将深入剖析 axios-1.x/lib/utils.js 文件，详细解读其中每个函数的实现原理、设计思路以及重点逻辑。通过对这些工具函数的深入理解，我们不仅能更好地掌握 Axios 的工作机制，还能学习到许多优秀的 JavaScript 编程技巧，提升自己的代码能力。

二、源码详细解析

2.1 类型判断函数

2.1.1 `kindOf` 函数

代码语言：javascript代码运行次数：0运行复制

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

代码解释：kindOf 函数使用了立即执行函数（IIFE）来创建一个缓存对象 cache。对于传入的 thing，通过 Object.prototype.toString.call(thing) 获取其类型字符串，然后截取中间部分并转换为小写作为最终的类型名称。如果该类型名称已经在缓存中，则直接返回，否则将其存入缓存并返回。
设计思路：利用缓存机制避免重复计算，提高性能。Object.create(null) 创建一个没有原型链的空对象，避免了原型链上的属性干扰。
重点逻辑：通过 Object.prototype.toString 方法可以准确获取对象的类型，不受 instanceof 等方法的限制。

2.1.2 `kindOfTest` 函数

代码语言：javascript代码运行次数：0运行复制

const kindOfTest = (type) => {
  type = type.toLowerCase();
  return (thing) => kindOf(thing) === type
}

代码解释：kindOfTest 函数接受一个类型名称作为参数，返回一个新的函数。新函数接受一个 thing，调用 kindOf 函数判断其类型是否与传入的类型名称一致。
设计思路：使用柯里化技术，将类型判断逻辑封装成可复用的函数，提高代码的灵活性和可维护性。
重点逻辑：通过柯里化将类型判断的类型参数提前固定，方便后续使用。

2.1.3 其他类型判断函数

如 isArray、isUndefined、isBuffer 等一系列类型判断函数，大多基于 kindOfTest 或 typeOfTest 实现，用于判断不同类型的值。

2.2 数组和对象操作函数

2.2.1 `forEach` 函数

代码语言：javascript代码运行次数：0运行复制

function forEach(obj, fn, {allOwnKeys = false} = {}) {
  if (obj === null || typeof obj === 'undefined') {
    return;
  }

  let i;
  let l;

  if (typeof obj !== 'object') {
    obj = [obj];
  }

  if (isArray(obj)) {
    for (i = 0, l = obj.length; i < l; i++) {
      fn.call(null, obj[i], i, obj);
    }
  } else {
    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 函数用于遍历数组或对象。如果传入的 obj 不是对象，则将其转换为数组。对于数组，使用 for 循环遍历；对于对象，根据 allOwnKeys 参数决定使用 Object.getOwnPropertyNames 还是 Object.keys 获取属性名，然后遍历属性。
设计思路：统一数组和对象的遍历逻辑，提供一个通用的遍历函数，方便在不同场景下使用。
重点逻辑：通过判断 obj 的类型，分别处理数组和对象的遍历，同时支持获取所有自有属性或仅可枚举属性。

2.2.2 `merge` 函数

代码语言：javascript代码运行次数：0运行复制

function merge(/* obj1, obj2, obj3, ... */) {
  const {caseless} = isContextDefined(this) && this || {};
  const result = {};
  const assignValue = (val, key) => {
    const targetKey = caseless && findKey(result, key) || key;
    if (isPlainObject(result[targetKey]) && isPlainObject(val)) {
      result[targetKey] = merge(result[targetKey], val);
    } else if (isPlainObject(val)) {
      result[targetKey] = merge({}, val);
    } else if (isArray(val)) {
      result[targetKey] = val.slice();
    } else {
      result[targetKey] = val;
    }
  }

  for (let i = 0, l = arguments.length; i < l; i++) {
    arguments[i] && forEach(arguments[i], assignValue);
  }
  return result;
}

代码解释：merge 函数用于合并多个对象。它会递归地合并对象的属性，如果属性值也是对象，则继续调用 merge 函数。对于数组，会复制一份新的数组。
设计思路：实现对象的深合并，确保合并后的对象不会影响原始对象。
重点逻辑：通过递归处理嵌套对象，同时处理数组和普通值的情况，保证合并的正确性。

2.3 字符串处理函数

2.3.1 `trim` 函数

代码语言：javascript代码运行次数：0运行复制

const trim = (str) => str.trim ?
  str.trim() : str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');

代码解释：trim 函数用于去除字符串两端的空白字符。如果字符串对象有 trim 方法，则直接调用；否则使用正则表达式替换。
设计思路：兼容不同浏览器环境，确保在不支持 trim 方法的环境下也能正常工作。
重点逻辑：通过条件判断选择合适的方法去除空白字符。

2.3.2 `toCamelCase` 函数

代码语言：javascript代码运行次数：0运行复制

const toCamelCase = str => {
  return str.toLowerCase().replace(/[-_\s]([a-z\d])(\w*)/g,
    function replacer(m, p1, p2) {
      return p1.toUpperCase() + p2;
    }
  );
};

代码解释：toCamelCase 函数将字符串转换为驼峰命名法。通过正则表达式匹配连字符、下划线或空白字符后的第一个字符，将其转换为大写。
设计思路：方便在不同命名风格之间进行转换，提高代码的可读性和一致性。
重点逻辑：使用正则表达式和 replace 方法实现字符串的替换。

2.4 其他工具函数

2.4.1 `_setImmediate` 函数

代码语言：javascript代码运行次数：0运行复制

const _setImmediate = ((setImmediateSupported, postMessageSupported) => {
  if (setImmediateSupported) {
    return setImmediate;
  }

  return postMessageSupported ? ((token, callbacks) => {
    _global.addEventListener("message", ({source, data}) => {
      if (source === _global && data === token) {
        callbacks.length && callbacks.shift()();
      }
    }, false);

    return (cb) => {
      callbacks.push(cb);
      _global.postMessage(token, "*");
    }
  })(`axios@${Math.random()}`, []) : (cb) => setTimeout(cb);
})(
  typeof setImmediate === 'function',
  isFunction(_global.postMessage)
);

代码解释：_setImmediate 函数用于实现异步执行回调函数。优先使用 setImmediate 方法，如果不支持则使用 postMessage 模拟，最后使用 setTimeout 作为兜底方案。
设计思路：在不同环境下尽可能高效地实现异步执行，提高性能。
重点逻辑：通过检测环境支持的方法，选择最优的实现方案。

三、结语

本文深入剖析了 axios-1.x/lib/utils.js 文件中的各类工具函数，包括类型判断、数组和对象操作、字符串处理以及其他辅助函数。通过对这些函数的详细解析，我们了解到 Axios 是如何利用这些工具函数来实现其核心功能的。

通过阅读 Axios 的源码，我们学习到了许多优秀的 JavaScript 编程技巧，如缓存机制、柯里化、递归处理、兼容性处理等。这些技巧不仅可以应用到 Axios 的使用中，还能提升我们在日常开发中的代码质量和性能。

Axios 源码阅读

一、引言

二、源码详细解析

2.1 类型判断函数

2.1.1 `kindOf` 函数

代码语言：javascript代码运行次数：0运行复制

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

代码解释：kindOf 函数使用了立即执行函数（IIFE）来创建一个缓存对象 cache。对于传入的 thing，通过 Object.prototype.toString.call(thing) 获取其类型字符串，然后截取中间部分并转换为小写作为最终的类型名称。如果该类型名称已经在缓存中，则直接返回，否则将其存入缓存并返回。
设计思路：利用缓存机制避免重复计算，提高性能。Object.create(null) 创建一个没有原型链的空对象，避免了原型链上的属性干扰。
重点逻辑：通过 Object.prototype.toString 方法可以准确获取对象的类型，不受 instanceof 等方法的限制。

2.1.2 `kindOfTest` 函数

代码语言：javascript代码运行次数：0运行复制

const kindOfTest = (type) => {
  type = type.toLowerCase();
  return (thing) => kindOf(thing) === type
}

代码解释：kindOfTest 函数接受一个类型名称作为参数，返回一个新的函数。新函数接受一个 thing，调用 kindOf 函数判断其类型是否与传入的类型名称一致。
设计思路：使用柯里化技术，将类型判断逻辑封装成可复用的函数，提高代码的灵活性和可维护性。
重点逻辑：通过柯里化将类型判断的类型参数提前固定，方便后续使用。

2.1.3 其他类型判断函数

如 isArray、isUndefined、isBuffer 等一系列类型判断函数，大多基于 kindOfTest 或 typeOfTest 实现，用于判断不同类型的值。

2.2 数组和对象操作函数

2.2.1 `forEach` 函数

代码语言：javascript代码运行次数：0运行复制

function forEach(obj, fn, {allOwnKeys = false} = {}) {
  if (obj === null || typeof obj === 'undefined') {
    return;
  }

  let i;
  let l;

  if (typeof obj !== 'object') {
    obj = [obj];
  }

  if (isArray(obj)) {
    for (i = 0, l = obj.length; i < l; i++) {
      fn.call(null, obj[i], i, obj);
    }
  } else {
    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 函数用于遍历数组或对象。如果传入的 obj 不是对象，则将其转换为数组。对于数组，使用 for 循环遍历；对于对象，根据 allOwnKeys 参数决定使用 Object.getOwnPropertyNames 还是 Object.keys 获取属性名，然后遍历属性。
设计思路：统一数组和对象的遍历逻辑，提供一个通用的遍历函数，方便在不同场景下使用。
重点逻辑：通过判断 obj 的类型，分别处理数组和对象的遍历，同时支持获取所有自有属性或仅可枚举属性。

2.2.2 `merge` 函数

代码语言：javascript代码运行次数：0运行复制

function merge(/* obj1, obj2, obj3, ... */) {
  const {caseless} = isContextDefined(this) && this || {};
  const result = {};
  const assignValue = (val, key) => {
    const targetKey = caseless && findKey(result, key) || key;
    if (isPlainObject(result[targetKey]) && isPlainObject(val)) {
      result[targetKey] = merge(result[targetKey], val);
    } else if (isPlainObject(val)) {
      result[targetKey] = merge({}, val);
    } else if (isArray(val)) {
      result[targetKey] = val.slice();
    } else {
      result[targetKey] = val;
    }
  }

  for (let i = 0, l = arguments.length; i < l; i++) {
    arguments[i] && forEach(arguments[i], assignValue);
  }
  return result;
}

代码解释：merge 函数用于合并多个对象。它会递归地合并对象的属性，如果属性值也是对象，则继续调用 merge 函数。对于数组，会复制一份新的数组。
设计思路：实现对象的深合并，确保合并后的对象不会影响原始对象。
重点逻辑：通过递归处理嵌套对象，同时处理数组和普通值的情况，保证合并的正确性。

2.3 字符串处理函数

2.3.1 `trim` 函数

代码语言：javascript代码运行次数：0运行复制

const trim = (str) => str.trim ?
  str.trim() : str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');

代码解释：trim 函数用于去除字符串两端的空白字符。如果字符串对象有 trim 方法，则直接调用；否则使用正则表达式替换。
设计思路：兼容不同浏览器环境，确保在不支持 trim 方法的环境下也能正常工作。
重点逻辑：通过条件判断选择合适的方法去除空白字符。

2.3.2 `toCamelCase` 函数

代码语言：javascript代码运行次数：0运行复制

const toCamelCase = str => {
  return str.toLowerCase().replace(/[-_\s]([a-z\d])(\w*)/g,
    function replacer(m, p1, p2) {
      return p1.toUpperCase() + p2;
    }
  );
};

代码解释：toCamelCase 函数将字符串转换为驼峰命名法。通过正则表达式匹配连字符、下划线或空白字符后的第一个字符，将其转换为大写。
设计思路：方便在不同命名风格之间进行转换，提高代码的可读性和一致性。
重点逻辑：使用正则表达式和 replace 方法实现字符串的替换。

2.4 其他工具函数

2.4.1 `_setImmediate` 函数

代码语言：javascript代码运行次数：0运行复制

const _setImmediate = ((setImmediateSupported, postMessageSupported) => {
  if (setImmediateSupported) {
    return setImmediate;
  }

  return postMessageSupported ? ((token, callbacks) => {
    _global.addEventListener("message", ({source, data}) => {
      if (source === _global && data === token) {
        callbacks.length && callbacks.shift()();
      }
    }, false);

    return (cb) => {
      callbacks.push(cb);
      _global.postMessage(token, "*");
    }
  })(`axios@${Math.random()}`, []) : (cb) => setTimeout(cb);
})(
  typeof setImmediate === 'function',
  isFunction(_global.postMessage)
);

代码解释：_setImmediate 函数用于实现异步执行回调函数。优先使用 setImmediate 方法，如果不支持则使用 postMessage 模拟，最后使用 setTimeout 作为兜底方案。
设计思路：在不同环境下尽可能高效地实现异步执行，提高性能。
重点逻辑：通过检测环境支持的方法，选择最优的实现方案。

三、结语

本文标签： Axios 源码阅读

版权声明：本文标题：Axios 源码阅读内容由热心网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://it.en369.cn/jiaocheng/1747434854a2166313.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

369IT编程

Axios 源码阅读

Axios 源码阅读

一、引言

二、源码详细解析

2.1 类型判断函数

2.1.1 kindOf 函数

2.1.2 kindOfTest 函数

2.1.3 其他类型判断函数

2.2 数组和对象操作函数

2.2.1 forEach 函数

2.2.2 merge 函数

2.3 字符串处理函数

2.3.1 trim 函数

2.3.2 toCamelCase 函数

2.4 其他工具函数

2.4.1 _setImmediate 函数

三、结语

Axios 源码阅读

一、引言

二、源码详细解析

2.1 类型判断函数

2.1.1 kindOf 函数

2.1.2 kindOfTest 函数

2.1.3 其他类型判断函数

2.2 数组和对象操作函数

2.2.1 forEach 函数

2.2.2 merge 函数

2.3 字符串处理函数

2.3.1 trim 函数

2.3.2 toCamelCase 函数

2.4 其他工具函数

2.4.1 _setImmediate 函数

三、结语

更多相关文章

Axios 源码阅读

发表评论

推荐文章

customization - Custom table or form

javascript - using REGEX on textInput in react native - Stack Overflow

javascript - Insert dynamically a React component in a div - Stack Overflow

Conditional for single-{post-type}.php

深度解析算法之分治（归并）

热门文章

url rewriting - Taxonomy rewrite question

javascript - HTML5 Video Element on iPad doesn&#39;t fire onclick? - Stack Overflow

ef code first - EF Core does not allow Cascade Delete on 2 foreign keys, but Blazor sample web app does this just fine - Stack O

javascript - Is the &#39;foreach&#39; loop here behaving in parallel or squential? - Stack Overflow

shortcode - How to use strip_shortcodes() from a spawned process?

javascript - how to use split() function with html tag and whitespace - Stack Overflow

c - I2C address Error between Nucleo-F411RE and new board - Stack Overflow

javascript - How would I import a spine image, .json file, and a .atlas file into an HTML Document to display an animated model?

php - Is it possible to dynamically change the URL of a webpage? - Stack Overflow

重装系统：U盘如何制作成系统启动盘和恢复成普通U盘

最新文章

【C++】C++成为大神的登神长阶【入门篇（2100）】

AI 时代下，普通人不能错过的五大变现机会

深度解析算法之分治（归并）

如何解决 TypeError: Cannot read properties of undefined (reading ‘ok’) 问题

26. Python函数值传递和引用传递详解

程序员刚毕业，先去大厂镀金还是先去小厂攒经验？

万象2008清空boss账户密码

【Tools】GitBook简明教程

oracle exadata celldisk 闪存盘受损导致性能下降

SDUT 2138 图结构练习——BFSDFS——判断可达性

javascript - Type &#39;undefined&#39; is not assignable to type &#39;menuItemProps[]&#39; - Stack Overflow

javascript - VS 2015 Angular 2 import modules cannot be resolved - Stack Overflow

javascript - Get the JSON objects that are not present in another array - Stack Overflow

javascript - How to dismiss a phonegap notification programmatically - Stack Overflow

c - Solaris 10 make Error code 1 Fatal Error when trying to build python 2.7.16 - Stack Overflow

2.1.1 `kindOf` 函数

2.1.2 `kindOfTest` 函数

2.2.1 `forEach` 函数

2.2.2 `merge` 函数

2.3.1 `trim` 函数

2.3.2 `toCamelCase` 函数

2.4.1 `_setImmediate` 函数

2.1.1 `kindOf` 函数

2.1.2 `kindOfTest` 函数

2.2.1 `forEach` 函数

2.2.2 `merge` 函数

2.3.1 `trim` 函数

2.3.2 `toCamelCase` 函数

2.4.1 `_setImmediate` 函数

javascript - HTML5 Video Element on iPad doesn't fire onclick? - Stack Overflow

javascript - Is the 'foreach' loop here behaving in parallel or squential? - Stack Overflow

javascript - Type 'undefined' is not assignable to type 'menuItemProps[]' - Stack Overflow