Welcome to my official account, "front-end wall".

1, Environmental preparation

• axios version v0 twenty-four

• Through github1s web page, you can see axios source code

• clone to local is required for debugging

git clone https://github.com/axios/axios.git

cd axios

npm start

http://localhost:3000/

2, Function study

1. Overview of auxiliary function helper

Browser adapter xhr

var utils = require("./../utils");
var settle = require("./../core/settle");
var cookies = require("./../helpers/cookies");
var buildURL = require("./../helpers/buildURL");
var buildFullPath = require("../core/buildFullPath");
var parseHeaders = require("./../helpers/parseHeaders");
var isURLSameOrigin = require("./../helpers/isURLSameOrigin");
var createError = require("../core/createError");
var defaults = require("../defaults");
var Cancel = require("../cancel/Cancel");

node adapter http

var utils = require("./../utils");
var settle = require("./../core/settle");
var buildFullPath = require("../core/buildFullPath");
var buildURL = require("./../helpers/buildURL");
var http = require("http");
var https = require("https");
var httpFollow = require("follow-redirects").http;
var httpsFollow = require("follow-redirects").https;
var url = require("url");
var zlib = require("zlib");
var VERSION = require("./../env/data").version;
var createError = require("../core/createError");
var enhanceError = require("../core/enhanceError");
var defaults = require("../defaults");
var Cancel = require("../cancel/Cancel");

We find the core functions used therein, such as set, buildFullPath, createError and enhanceError

2. Auxiliary function set

Resolve or reject a Promise based on response status

resolve or reject a Promise according to the response status

'use strict';

var createError = require('./createError');

/**
 * @param {Function} resolve A function that resolves the promise.
 * @param {Function} reject A function that rejects the promise.
 * @param {object} response The response.
 */
module.exports = function settle(resolve, reject, response) {
  var validateStatus = response.config.validateStatus;
  if (!response.status || !validateStatus || validateStatus(response.status)) {
    resolve(response);
  } else {
    reject(createError(
      'Request failed with status code ' + response.status,
      response.config,
      null,
      response.request,
      response
    ));
  }
};

• Change the Promise status according to the http response status
• When rejecting, the user-defined createError method is called to generate the returned content of reject

3. Auxiliary function buildFullPath

Creates a new URL by combining the baseURL with the requestedURL, only when the requestedURL is not already an absolute URL

Create a new URL by combining the baseURL with the requested URL only if the requested URL is not an absolute URL

If the requestURL is absolute, this function returns the requestedURL untouched

If the requested URL is absolute, this function returns the requested URL intact

'use strict';

var isAbsoluteURL = require('../helpers/isAbsoluteURL');
var combineURLs = require('../helpers/combineURLs');

/**
 * @param {string} baseURL The base URL
 * @param {string} requestedURL Absolute or relative URL to combine
 * @returns {string} The combined full path
 */
module.exports = function buildFullPath(baseURL, requestedURL) {
  if (baseURL && !isAbsoluteURL(requestedURL)) {
    return combineURLs(baseURL, requestedURL);
  }
  return requestedURL;
};

• isAbsoluteURL and combineyurls are two regular expressions, which will respectively monitor whether the current requestedURL is an AbsoluteURL and connect baseURL and requestedURL. The final purpose is to make the returned url an absolute address

Tips: the judgment rule of absolute URL is whether it starts with scheme: / /, or whether it is a Protocol relative URL Start with / /

4. Auxiliary function createError

Create an Error with the specified message, config, error code, request and response

Creates an Error using the specified message, config, code, request, and Respnse

'use strict';

var enhanceError = require('./enhanceError');

/**
 * @param {string} message The error message.
 * @param {Object} config The config.
 * @param {string} [code] The error code (for example, 'ECONNABORTED').
 * @param {Object} [request] The request.
 * @param {Object} [response] The response.
 * @returns {Error} The created error.
 */
module.exports = function createError(message, config, code, request, response) {
  var error = new Error(message);
  return enhanceError(error, config, code, request, response);
};

• An error in error createnew object was created
• When the error object is first generated, it has only one message attribute. You need to use enhanceError to enhance the returned error information

5. Auxiliary function enhanceError

Update an Error with the specified config, error code, and response

Upgrade the Error with the specified configuration, Error code, and response

'use strict';

/**
 * @param {Error} error The error to update.
 * @param {Object} config The config.
 * @param {string} [code] The error code (for example, 'ECONNABORTED').
 * @param {Object} [request] The request.
 * @param {Object} [response] The response.
 * @returns {Error} The error.
 */
module.exports = function enhanceError(error, config, code, request, response) {
  error.config = config;
  if (code) {
    error.code = code;
  }

  error.request = request;
  error.response = response;
  error.isAxiosError = true;

  error.toJSON = function toJSON() {
    return {
      // Standard
      message: this.message,
      name: this.name,
      // Microsoft
      description: this.description,
      number: this.number,
      // Mozilla
      fileName: this.fileName,
      lineNumber: this.lineNumber,
      columnNumber: this.columnNumber,
      stack: this.stack,
      // Axios
      config: this.config,
      code: this.code,
      status: this.response && this.response.status ? this.response.status : null
    };
  };
  return error;
};

• The input error is an error object created with new Error
• The enhanceError method is simply to upgrade the Error object and add config, code, request and response attributes to the Error object generated by Axios
• In addition, some corresponding supplementary information is returned according to different browser environments. The content returned by reject will be an error type information containing these supplementary information

3, Reference

1. Lin Jingyi's article Lin Jingyi's Notepad - Axios source code analysis (V): core tools and methods