快捷導(dǎo)航

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

更新時(shí)間：2022年12月15日 16:05:10 作者：一條會(huì)coding的Shark

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

前言

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

源碼閱讀

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

這是截取的其中一部分，粗略看下來(lái)大概有四五十個(gè)工具函數(shù)，接下來(lái)開(kāi)始分享其中一些這里面我平時(shí)不怎么見(jiàn)到過(guò)或者用到過(guò)的工具函數(shù)，來(lái)學(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 主要作用是獲取對(duì)象的類型。有點(diǎn)類似于 typeof，typeof 是判斷對(duì)象的類型的作用。

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 是用來(lái)判斷 buffer 類的，它是一個(gè)類似于 Array 的對(duì)象。

這里先判斷 val 是否為 null 或者 undefined，再判斷 val 的構(gòu)造函數(shù)是否為 null 或者 undefined，最后再回調(diào) isBuffer 函數(shù)對(duì) 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 是用來(lái)判斷純對(duì)象的，純對(duì)象可以理解為純粹的對(duì)象。

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, '');
}

這個(gè)方法在項(xiàng)目中有用到過(guò)，但是用的頻率并不是很高，是用來(lái)去除字符串兩側(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í)從字面意思也大概能猜到它的作用，它是用來(lái)找到對(duì)象的 Key 值的，也可以說(shuō)是鍵值吧。

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)，它傳入了很多對(duì)象參數(shù)，再結(jié)合 merge 合并的意思，不難猜出這個(gè)函數(shù)是用來(lái)合并對(duì)象的。在合并代碼的時(shí)候，里面就能看到 merge。

stripBOM

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

這個(gè)函數(shù)是用來(lái)去除編碼中的 BOM 的，這個(gè)確實(shí)沒(méi)怎么見(jiàn)過(guò)或者聽(tīng)說(shuō)過(guò)。

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 來(lái)判斷，這個(gè)函數(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;
}

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

toCamelCase

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

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

總結(jié)

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

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

您可能感興趣的文章: