一文带你掌握axios 工具函数

更新时间：2022年12月15日 16:05:10 作者：一条会coding的Shark

这篇文章主要为大家介绍了axios 工具函数使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

前言

在上周看做项目的时候看到了项目里封装的 axios，对其封装的原理没有弄清楚，于是周末的时候便抽了点空闲时间来看了看 axios 的源码，将其研究研究。

源码阅读

这里就不单独介绍 axios 了，对于 axios 想必大家都有过了解。咱们直接进入源码阅读的主题。我们今天主要看的是源码中的utils.js文件，里面包含了很多工具函数。

这是截取的其中一部分，粗略看下来大概有四五十个工具函数，接下来开始分享其中一些这里面我平时不怎么见到过或者用到过的工具函数，来学习一下。

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 主要作用是获取对象的类型。有点类似于 typeof，typeof 是判断对象的类型的作用。

isBuffer

function isBuffer(val) {
    return val !== null && 
    !isUndefined(val) && 
    val.constructor !== 
    null && 
    !isUndefined(val.constructor) && 
    isFunction(val.constructor.isBuffer) && 
    val.constructor.isBuffer(val);
}

Buffer 中文意思是缓冲区。isBuffer 是用来判断 buffer 类的，它是一个类似于 Array 的对象。

这里先判断 val 是否为 null 或者 undefined，再判断 val 的构造函数是否为 null 或者 undefined，最后再回调 isBuffer 函数对 val 的构造函数进行判断。

isArrayBufferView

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

isPlainObject

const isPlainObject = (val) => {
  if (kindOf(val) !== 'object') {
    return false;
  }
  const prototype = getPrototypeOf(val);
  return (
      prototype === null || 
      prototype === Object.prototype || 
      Object.getPrototypeOf(prototype) === null) && 
      !(Symbol.toStringTag in val) && 
      !(Symbol.iterator in val
  );
};

isPlainObject 是用来判断纯对象的，纯对象可以理解为纯粹的对象。

isFormData

const isFormData = (thing) => {
  const pattern = '[object FormData]';
  return thing && (
    (typeof FormData === 'function' && 
    thing instanceof FormData) ||
    toString.call(thing) === pattern ||
    (isFunction(thing.toString) && thing.toString() === pattern)
  );
}

isFormData 是判断传入的参数 thing 是否为 isFormData。

trim

function trim(str) {
  return str.trim ? str.trim() : str.replace(/^\s+|\s+$/g, '');
}

这个方法在项目中有用到过，但是用的频率并不是很高，是用来去除字符串两侧的空白字符的。

findKey

function findKey(obj, key) {
  key = key.toLowerCase();
  const keys = Object.keys(obj);
  let i = keys.length;
  let _key;
  while (i-- > 0) {
    _key = keys[i];
    if (key === _key.toLowerCase()) {
      return _key;
    }
  }
  return null;
}

其实从字面意思也大概能猜到它的作用，它是用来找到对象的 Key 值的，也可以说是键值吧。

merge

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。

stripBOM

function stripBOM(content) {
  if (content.charCodeAt(0) === 0xFEFF) {
    content = content.slice(1);
  }
  return content;
}

这个函数是用来去除编码中的 BOM 的，这个确实没怎么见过或者听说过。

endsWith

const endsWith = (str, searchString, position) => {
  str = String(str);
  if (position === undefined || position > str.length) {
    position = str.length;
  }
  position -= searchString.length;
  const lastIndex = str.indexOf(searchString, position);
  return lastIndex !== -1 && lastIndex === position;
}

从传入参数 str，searchString, position 来判断，这个函数应该和判断字符串位置有关。然后结合 lastIndex === position 可以看出，它的作用是判断字符串（str）是否以指定的字符串（searchString）结尾（position）。

toArray

const toArray = (thing) => {
  if (!thing) return null;
  if (isArray(thing)) return thing;
  let i = thing.length;
  if (!isNumber(i)) return null;
  const arr = new Array(i);
  while (i-- > 0) {
    arr[i] = thing[i];
  }
  return arr;
}

这个函数可以将类数组转换为数组，里面的逻辑实现不难理解，相对比较简单。

toCamelCase

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

都知道驼峰命名法吧，这个函数可以将字符串转换为驼峰命名。类似于把 abcdef 的字符转换成 abcDef。

总结

仅仅看一遍是远远不够的，这源码里覆盖了太多工具函数，这里我阅读了其中十几种。通过简单阅读了一遍 axios 的源码，让我对 axios 有了进一步认识，关于剩下的源码部分，下周会继续抽时间完成阅读学习。总之，我认为 axios 源码可以多看几遍，每一遍或许都会有不同的认识。

以上就是一文带你掌握axios 工具函数的详细内容，更多关于axios 工具函数的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

javascript css在IE和Firefox中区别分析
我们讨论的主题CSS网页布局，最令大家头疼的问题就是浏览器兼容性，虽然52CSS.com介绍过很多这方向的知识，但依然让很多开发人员晕头转向，今天的这篇文章，将列出css和javascript在IE和Firefox中二十三个不同点，希望对大家的学习有所帮助。
2009-02-02
BootStrop前端框架入门教程详解
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。这篇文章主要介绍了BootStrop前端框架入门教程详,需要的朋友可以参考下
2016-12-12
JS阻止事件冒泡行为和闭包的方法
这篇文章主要介绍了JS阻止事件冒泡行为和闭包的方法的相关资料,需要的朋友可以参考下
2016-06-06
Bootstrap CDN和本地化环境搭建
这篇文章主要介绍了Bootstrap CDN和本地化环境搭建的方法，非常不错具有参考借鉴价值，感兴趣的朋友跟着小编一起学习吧
2016-10-10
js绘制购物车抛物线动画
这篇文章主要为大家详细介绍了js绘制购物车抛物线动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-09-09
JS数字精度丢失的原因及解决方案
JS的数字类型一旦数字超过限值,JS将会丢失精度,导致前后端的值出现不一致,这篇文章主要给大家介绍了关于JS数字精度丢失的原因分析及解决方法,需要的朋友可以参考下
2022-04-04
JS得到当前时间的方法示例
这篇文章主要介绍了JS得到当前时间的方法,结合具体实例形式对比分析了javascript获取日期时间的相关操作技巧,需要的朋友可以参考下
2017-03-03
利用原生的JavaScript实现简单拼图游戏
拼图游戏是我们大家都玩过的一款小游戏，下面这篇文章主要给大家介绍了关于如何利用原生的JavaScript实现简单拼图游戏的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下
2018-11-11
js 获取图像缩放后的实际宽高,位置等信息
本文主要介绍了js获取图像缩放后的实际宽高,位置等信息的方法，具有很好的参考价值。下面跟着小编一起来看下吧
2017-03-03
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
这篇文章主要是对JavaScript中的常见问题解决方法(乱码,IE缓存,代理)进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-11-11