深入剖析 axios 源码 - 从工具库 utils 一窥 Axios 的智慧

在现代前端开发中，AJAX 技术已成为必不可少的利器。它允许我们向服务器发送异步请求，并在不刷新整个页面的情况下获取数据。而 Axios 库作为一款优秀的 JavaScript HTTP 请求库，凭借其简单易用、功能强大的特点，成为许多开发人员的首选。

为了提高效率，Axios 使用了一些工具库（utils），这是一个非 Axios 特有的通用帮助函数库。在本篇文章中，我们将重点解析这个文件中的三个重要函数（merge/forEach/extend），带你深入了解 Axios 的内部运作机制。

函数一：merge - 巧妙合并对象

在 Axios 中，merge 函数用于合并两个或多个对象，它会将源对象（source）的属性和值复制到目标对象（target）中。如果目标对象中已经存在某个属性，则会使用源对象的属性值覆盖目标对象的属性值。

function merge(target, source) {
  if (!source) {
    return target;
  }

  for (const property in source) {
    if (Object.prototype.hasOwnProperty.call(source, property)) {
      const value = source[property];
      if (typeof value === 'object' && value !== null) {
        target[property] = merge(target[property], value);
      } else {
        target[property] = value;
      }
    }
  }

  return target;
}

这个函数的实现非常巧妙，它使用了递归的方式来合并对象。如果源对象的某个属性值是对象，则会再次调用 merge 函数，将源对象的属性值和目标对象的属性值进行合并。否则，直接将源对象的属性值赋给目标对象的属性值。

函数二：forEach - 遍历对象或数组

forEach 函数用于遍历对象或数组中的每一个元素，并对每个元素执行指定的回调函数。

function forEach(obj, fn) {
  if (Array.isArray(obj)) {
    for (let i = 0; i < obj.length; i++) {
      fn(obj[i], i, obj);
    }
  } else {
    for (const property in obj) {
      if (Object.prototype.hasOwnProperty.call(obj, property)) {
        fn(obj[property], property, obj);
      }
    }
  }
}

这个函数的实现非常简单，它首先判断 obj 是数组还是对象，然后使用相应的循环方式遍历 obj 中的每一个元素，并对每个元素执行指定的回调函数 fn。

函数三：extend - 扩展对象

extend 函数用于扩展一个对象，它会将源对象（source）的属性和值复制到目标对象（target）中，但与 merge 函数不同的是，extend 函数不会覆盖目标对象中已有的属性值。

function extend(target, source) {
  if (!source) {
    return target;
  }

  for (const property in source) {
    if (Object.prototype.hasOwnProperty.call(source, property) && !Object.prototype.hasOwnProperty.call(target, property)) {
      target[property] = source[property];
    }
  }

  return target;
}

这个函数的实现也比较简单，它使用了一个 for in 循环来遍历源对象中的每一个属性，然后检查目标对象中是否已经存在该属性。如果目标对象中不存在该属性，则将源对象的属性值赋给目标对象的属性值。

结语

通过对 Axios 源码中 utils 工具库的重点函数（merge/forEach/extend）的解析，我们对 Axios 的内部运作机制有了更深入的了解。这些函数虽然看似简单，但它们却在 Axios 的开发中发挥着至关重要的作用，它们为 Axios 提供了强大的工具支持，使得 Axios 能够更高效、更便捷地处理 HTTP 请求。