【若川视野 x 源码共读】第19期 | Axios 工具函数

本文参加了由公众号@若川视野 发起的每周源码共读活动，点击了解详情一起参与。

本次阅读的源码内容和上次读的 Vue3 中的工具函数内容，大同小异，总的来说，都是一些纯函数，而它们的作用一般都是用来组合其他函数构成一些复杂函数。

做一些检查操作

现在常用的流行框架和库里，都会有一个差不多一样的工具类库，而里面的内容大致可以分为以下几类：

1. 判断数据类型

   1. 数组
   2. NULL
   3. Undefined
   4. 数字
   5. ......

2. 值操作
3. 内置函数
4. 其他

这些方法都将在整个项目中起到“基建”的作用，是不可或缺的简单而又实用的工具。在本次的阅读中，有比上次多了几个判断类型的方法：

// Buffer 相关
function isBuffer(val) {
  return val !== null && !isUndefined(val) && val.constructor !== null
  	&& isUndefined(val.constructor) && typeof val.constructor.isBuffer === 'function'
  	&& val.constructor.isBuffer(val)
}

function isArrayBuffer(val) {
  return toString.call(val) === '[object ArrayBuffer]'
}

function isArrayBufferView(val) {
  var result;
  if ((typeof ArrayBuffer !== 'undefined') && (ArrayBuffer.isView)) {
    result = ArrayBuffer.isView(val)
  } else {
    result = (val) && (val.buffer) && (isArrayBuffer(val.buffer)
  }
  return result
}

// FormData
function isFormData(val) {
  return toString.call(val) === '[object FormData]'
}

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

// Blob
function isBlob(val) {
  return toString.call(val) === '[object Blob]'
}

// Stream
function isStream(val) {
  return isObject(val) && isFunction(val.pipe)
}

// URLSearchParams
function isURLSearchParams(val) {
  return toString.call(val) === '[object URLSearchParams]'
}

上面这些个数据类型校验，我们为什么在 Vue3 的工具函数中看到？很明显的一个事情是，axios 和 vue 的方向是不同的，一个是接口层面一个是视图层面。在 axios 中，会接受到后端返回来的各式各样的数据，所以会要有比较全的数据类型判断，比如 FormData、Buffer、Stream、Blob 等等。

还有一些对常用方法进行重写的兼容写法，比如 trim 、forEach 等等。

这些重写后的方法，打破了原有的局限性，可以适用于更多的场景，我们也可以将这种思路学习下来，在自己的一些方法库或者项目中去使用。