麦谷 | 第17分组 | 第19期 | axios 工具函数

今天我们又来学习源码了,我的axios对应的版本是 “version”:”0.25.0”

工具函数

今天的主角是utils.js文件, 以下列出了文件中的工具函数：

isArray 判断数组

/**
* Determine if a value is an Array
*
* @param {Object} val The value to test
* @returns {boolean} True if value is an Array, otherwise false
*/
// 判断是否是数组，调用了Array类上的isArray方法
function isArray(val) {
  return Array.isArray(val);
}

isUndefined 判断Undefined

/**
* Determine if a value is undefined
*
* @param {Object} val The value to test
* @returns {boolean} True if the value is undefined, otherwise false
*/
// 判断值是否为undefined
function isUndefined(val) {
  return typeof val === 'undefined';
}

isBuffer 判断 buffer

/**
* Determine if a value is a Buffer
*
* @param {Object} val The value to test
* @returns {boolean} True if value is a Buffer, otherwise false
*/
function isBuffer(val) {
  return val !== null && 
    !isUndefined(val) && 
    val.constructor !== null && 
    !isUndefined(val.constructor) && 
    typeof val.constructor.isBuffer === 'function' && 
    val.constructor.isBuffer(val);
}

什么是Buffer?
JavaScript 语言自身只有字符串数据类型，没有二进制数据类型。
但在处理像TCP流或文件流时，必须使用到二进制数据。因此在 Node.js中，定义了一个Buffer 类，该类用来创建一个专门存放二进制数据的缓存区。

isArrayBuffer判断ArrayBuffer

/**
* Determine if a value is an ArrayBuffer
*
* @param {Object} val The value to test
* @returns {boolean} True if value is an ArrayBuffer, otherwise false
*/
function isArrayBuffer(val) {
  return toString.call(val) === '[object ArrayBuffer]';
}

isFormData 判断FormData

/**
* Determine if a value is a FormData
*
* @param {Object} val The value to test
* @returns {boolean} True if value is an FormData, otherwise false
*/
function isFormData(val) {
  return toString.call(val) === '[object FormData]';
}

isObject 判断对象

/**
* Determine if a value is an Object
*
* @param {Object} val The value to test
* @returns {boolean} True if value is an Object, otherwise false
*/
function isObject(val) {
  return val !== null && typeof val === 'object';
}

isPlainObject 判断 纯对象

纯对象： 用{}或new Object()创建的对象

/**
* Determine if a value is a plain Object
*
* @param {Object} val The value to test
* @return {boolean} True if value is a plain Object, otherwise false
*/
function isPlainObject(val) {
  if (toString.call(val) !== '[object Object]') {
    return false;
  }

isDate 判断Date

/**
* Determine if a value is a Date
*
* @param {Object} val The value to test
* @returns {boolean} True if value is a Date, otherwise false
*/
function isDate(val) {
  return toString.call(val) === '[object Date]';
}

isFile 判断文件类型

/**
* Determine if a value is a File
*
* @param {Object} val The value to test
* @returns {boolean} True if value is a File, otherwise false
*/
function isFile(val) {
  return toString.call(val) === '[object File]';
}

isBlob 判断Blob

/**
* Determine if a value is a Blob
*
* @param {Object} val The value to test
* @returns {boolean} True if value is a Blob, otherwise false
*/
function isBlob(val) {
  return toString.call(val) === '[object Blob]';
}

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取。

isFunction 判断函数

/**
* Determine if a value is a Function
*
* @param {Object} val The value to test
* @returns {boolean} True if value is a Function, otherwise false
*/
function isFunction(val) {
  return toString.call(val) === '[object Function]';
}

isStram 判断 数据流

/**
* Determine if a value is a Stream
*
* @param {Object} val The value to test
* @returns {boolean} True if value is a Stream, otherwise false
*/
function isStream(val) {
  return isObject(val) && isFunction(val.pipe);
}

isURLSearchParams 判断URLSearchParams

/**
* Determine if a value is a URLSearchParams object
*
* @param {Object} val The value to test
* @returns {boolean} True if value is a URLSearchParams object, otherwise false
*/
function isURLSearchParams(val) {
  return toString.call(val) === '[object URLSearchParams]';
}

trim 去除首尾空格

// `trim`方法不存在的话，用正则
function trim(str) {
  return str.trim ? str.trim() : str.replace(/^\s+|\s+$/g, '');
}

isStandardBrowserEnv 判断标准浏览器环境

/**
* Determine if we're running in a standard browser environment
*
* This allows axios to run in a web worker, and react-native.
* Both environments support XMLHttpRequest, but not fully standard globals.
*
* web workers:
*  typeof window -> undefined
*  typeof document -> undefined
*
* react-native:
*  navigator.product -> 'ReactNative'
* nativescript
*  navigator.product -> 'NativeScript' or 'NS'
*/
function isStandardBrowserEnv() {
  if (typeof navigator !== 'undefined' && (navigator.product === 'ReactNative' ||
                                           navigator.product === 'NativeScript' ||
                                           navigator.product === 'NS')) {
    return false;
  }
  return (
    typeof window !== 'undefined' &&
    typeof document !== 'undefined'
  );
}

forEach 遍历对象或数组

/**
* Accepts varargs expecting each argument to be an object, then
* immutably merges the properties of each object and returns result.
*
* When multiple objects contain the same key the later object in
* the arguments list will take precedence.
*
* Example:
*
* ```js
* var result = merge({foo: 123}, {foo: 456});
* console.log(result.foo); // outputs 456
*

*

• @param {Object} obj1 Object to merge

• @returns {Object} Result of all merge properties / function merge(/ obj1, obj2, obj3, … */) { var result = {}; function assignValue(val, key) { if (isPlainObject(result[key]) && isPlainObject(val)) {

  result[key] = merge(result[key], val);

  } else if (isPlainObject(val)) {

  result[key] = merge({}, val);

  } else if (isArray(val)) {

  result[key] = val.slice();

  } else {

  result[key] = val;

  } }

  for (var i = 0, l = arguments.length; i < l; i++) { forEach(arguments[i], assignValue); } return result; } ```

  stripBOM删除UTF-8编码中BOM

  ```javascript /**

• Remove byte order marker. This catches EF BB BF (the UTF-8 BOM) *
• @param {string} content with BOM
• @return {string} content value without BOM */

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

总结

通过读源码的方式，从源码中获取知识与经验，可以更好的帮助自己成长。