一文帶你掌握axios 工具函數

2022-12-17 14:00:22

前言

在上週看做專案的時候看到了專案裡封裝的 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-zd])(w*)/g,
    function replacer(m, p1, p2) {
      return p1.toUpperCase() + p2;
    }
  );
};

都知道駝峰命名法吧，這個函數可以將字串轉換為駝峰命名。類似於把 abcdef 的字元轉換成 abcDef。