一文帶你掌握axios 工具函數(shù)

更新時間：2022年12月15日 16:05:10 作者：一條會coding的Shark

這篇文章主要為大家介紹了axios 工具函數(shù)使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

在上周看做項(xiàng)目的時候看到了項(xiàng)目里封裝的 axios，對其封裝的原理沒有弄清楚，于是周末的時候便抽了點(diǎn)空閑時間來看了看 axios 的源碼，將其研究研究。

源碼閱讀

這里就不單獨(dú)介紹 axios 了，對于 axios 想必大家都有過了解。咱們直接進(jìn)入源碼閱讀的主題。我們今天主要看的是源碼中的utils.js文件，里面包含了很多工具函數(shù)。

這是截取的其中一部分，粗略看下來大概有四五十個工具函數(shù)，接下來開始分享其中一些這里面我平時不怎么見到過或者用到過的工具函數(shù)，來學(xué)習(xí)一下。

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 主要作用是獲取對象的類型。有點(diǎn)類似于 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 中文意思是緩沖區(qū)。isBuffer 是用來判斷 buffer 類的，它是一個類似于 Array 的對象。

這里先判斷 val 是否為 null 或者 undefined，再判斷 val 的構(gòu)造函數(shù)是否為 null 或者 undefined，最后再回調(diào) isBuffer 函數(shù)對 val 的構(gòu)造函數(shù)進(jìn)行判斷。

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 是判斷傳入的參數(shù) thing 是否為 isFormData。

trim

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

這個方法在項(xiàng)目中有用到過，但是用的頻率并不是很高，是用來去除字符串兩側(cè)的空白字符的。

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;
}

其實(shí)從字面意思也大概能猜到它的作用，它是用來找到對象的 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;
}

從參數(shù)里可以發(fā)現(xiàn)，它傳入了很多對象參數(shù)，再結(jié)合 merge 合并的意思，不難猜出這個函數(shù)是用來合并對象的。在合并代碼的時候，里面就能看到 merge。

stripBOM

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

這個函數(shù)是用來去除編碼中的 BOM 的，這個確實(shí)沒怎么見過或者聽說過。

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;
}

從傳入?yún)?shù) str，searchString, position 來判斷，這個函數(shù)應(yīng)該和判斷字符串位置有關(guān)。然后結(jié)合 lastIndex === position 可以看出，它的作用是判斷字符串（str）是否以指定的字符串（searchString）結(jié)尾（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;
}

這個函數(shù)可以將類數(shù)組轉(zhuǎn)換為數(shù)組，里面的邏輯實(shí)現(xiàn)不難理解，相對比較簡單。

toCamelCase

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

都知道駝峰命名法吧，這個函數(shù)可以將字符串轉(zhuǎn)換為駝峰命名。類似于把 abcdef 的字符轉(zhuǎn)換成 abcDef。

總結(jié)

僅僅看一遍是遠(yuǎn)遠(yuǎn)不夠的，這源碼里覆蓋了太多工具函數(shù)，這里我閱讀了其中十幾種。通過簡單閱讀了一遍 axios 的源碼，讓我對 axios 有了進(jìn)一步認(rèn)識，關(guān)于剩下的源碼部分，下周會繼續(xù)抽時間完成閱讀學(xué)習(xí)。總之，我認(rèn)為 axios 源碼可以多看幾遍，每一遍或許都會有不同的認(rèn)識。

以上就是一文帶你掌握axios 工具函數(shù)的詳細(xì)內(nèi)容，更多關(guān)于axios 工具函數(shù)的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: