Axios Utils tool method notes

preface

Participated in the source code reading activity of Wakawa Big man, this is the first source code reading notes I participated in in January, which is also the beginning of the New Year study plan. If a friend also want to participate in the source reading activities can visit if sichuan big digging home page, if sichuan big source reading activities, parentheses, conscience big free activities.

isBuffer

Constructor (null); constructor (null); constructor (isBuffer); Use the isBuffer method on the constructor to determine if the argument is a Buffer

function isBuffer(val) {
   returnval ! = =null&&! isUndefined(val) && val.constructor ! = =null && 
       !isUndefined(val.constructor) && 
       typeof val.constructor.isBuffer === 'function' && 
       val.constructor.isBuffer(val);
}
Copy the code

Buffer is a class added for NodeJs complete binary operations. Axios can run in both node and JS environments, so it has this tool method.

isArrayBuffer,isFormData,isDate,isFile,isBlob,isFunction

The commonly used judgment method is toString method to determine the type of data. Usually, ArrayBuffer is not often used, so I have not paid attention to these details, so I put them together to increase my impression.

var toString = Object.prototype.toString;

function isArrayBuffer(val) {
  return toString.call(val) === '[object ArrayBuffer]';
}

function isFormData(val) {
  return toString.call(val) === '[object FormData]';
}

function isDate(val) {
  return toString.call(val) === '[object Date]';
}

function isFile(val) {
  return toString.call(val) === '[object File]';
}

function isBlob(val) {
  return toString.call(val) === '[object Blob]';
}

function isFunction(val) {
  return toString.call(val) === '[object Function]';
}

Copy the code

isArrayBufferView

Compatible with environments without an ArrayBuffer class, determines whether the value passed is an ArrayBuffer view

The arrayBuffer.isview () method is used to determine if the parameter value passed is an ArrayBuffer view.
// For example, typed array objects or dataViews.
function isArrayBufferView(val) {
  var result;
  if ((typeof ArrayBuffer! = ='undefined') && (ArrayBuffer.isView)) {
    result = ArrayBuffer.isView(val);
  } else {
    result = (val) && (val.buffer) && (isArrayBuffer(val.buffer));
  }
  return result;
}
Copy the code

isStream

This method determines whether the input parameter is Stream by checking whether it is an object and whether the. Pipe method under the input parameter exists.

Streams are an abstract interface used to process streaming data in Node.js. The STREAM module provides an API for implementing the stream interface.

Node.js provides many stream objects. For example, requests to HTTP servers and process.stdout are instances of flows.

Streams can be readable, writable, or both. All streams are instances of EventEmitter.

For more information about streams, see the Section on Flows in Node.

function isStream(val) {
  return isObject(val) && isFunction(val.pipe);
}
Copy the code

isPlainObject

This method determines whether an Object is pure, that is, an Object created with {} and new Object(), and whether it has a prototype or whether prototype equals object. prototype.

function isPlainObject(val) {
  if(toString.call(val) ! = ='[object Object]') {
    return false;
  }

  var prototype = Object.getPrototypeOf(val);
  return prototype === null || prototype === Object.prototype;
}
Copy the code

isURLSearchParams

This method determines whether the parameter is URLSearchParams

function isURLSearchParams(val) {
  return toString.call(val) === '[object URLSearchParams]';
}
Copy the code

The URLSearchParams interface defines some useful methods for handling query strings of urls. For details on the definition and methods of URLSearchParams, see here. Here only slightly mention the specific way of use, deepen the impression.

// Create a new URL object with a string
var url = new URL('https://example.com?foo=1&bar=2');
// Create the URL object Retrieve from window.location with window.location
var url = new URL(window.location);
console.log(url.search);

// Create URLSearchParams, which implements Symbol. Iterator,
// 'and entries(), keys() and values() are iterators
var params = new URLSearchParams(url.search);
// Outputs key-value pairs
for (const key of params.keys()) {
    console.log(key);	//foo,bar
}
Copy the code

forEach

ForEach method, used to traverse objects and arrays, executing specific methods

function forEach(obj, fn) {
  // Don't bother if no value provided
  if (obj === null || typeof obj === 'undefined') {
    return;
  }

  // Force an array if not already something iterable
  if (typeofobj ! = ='object') {
    /*eslint no-param-reassign:0*/
    obj = [obj];
  }

  if (isArray(obj)) {
    // Iterate over array values
    for (var i = 0, l = obj.length; i < l; i++) {
      fn.call(null, obj[i], i, obj); }}else {
    // Iterate over object keys
    for (var key in obj) {
      if (Object.prototype.hasOwnProperty.call(obj, key)) {
        fn.call(null, obj[key], key, obj); }}}}Copy the code

isStandardBrowserEnv

This method is used to determine if it is a standard browser environment. Navigator. Product has been deprecated in MDN, I guess all non-standard browser environments will still support this value to distinguish the browser environment.

function isStandardBrowserEnv() {
  if (typeofnavigator ! = ='undefined' && (navigator.product === 'ReactNative' ||
                                           navigator.product === 'NativeScript' ||
                                           navigator.product === 'NS')) {
    return false;
  }
  return (
    typeof window! = ='undefined' &&
    typeof document! = ='undefined'
  );
}
Copy the code

merge

Merge an incoming parameter without modifying the original parameter. If the incoming parameter has a duplicate key, the value of the duplicate key of the latter parameter overwrites the previous one.

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;
}
Copy the code

extend

Adds attributes of B to A and binds parameters of B to the specified object.

function extend(a, b, thisArg) {
  forEach(b, function assignValue(val, key) {
    if (thisArg && typeof val === 'function') {
      a[key] = bind(val, thisArg);
    } else{ a[key] = val; }});return a;
}
Copy the code

conclusion

The Axios utils utility class is well written. It has ES6 features, some compatibility, and some Node environment methods. Through this study, summarized several problems: Node is still a little strange, a lot of basic knowledge is not complete, before the use of what to learn what mentality, need to correct; Good code still sees too little and is often unworldly.

Finally, Axios was always on the schedule to read, but didn’t execute. Strike while the iron is hot.