preface

This series looks at the source code from the point of view of frameworks or libraries that you will often use in development, and I’m sure you’ll know why after you read the source code. Generally read source code is required to read the official website API, so that you can quickly understand the code logic. Find the starting point (the entry document) and work your way through the details. When you read the source code, you need to read the core code line by line and get a sense of what the rest is for, but there are some not-so-critical pieces of code that are worth learning.

Axios features

  • Create XMLHttpRequests from the browser
  • Create HTTP requests from Node.js
  • Supporting Promise API
  • Intercept requests and responses
  • Transform request data and response data
  • Cancel the request
  • Automatically convert JSON data
  • The client supports XSRF defense

step

The preparatory work

  • Pull up the latest Axios code on Github
  • Global installationgruntnpm install -g grunt-cli, used to package and build Axios
  • Open the documentation and walk through the API to see how it works

Directory parse

Lib │ ├ ─ adapters fit different environment │ │ ├ ─ HTTP. Js node environment to create HTTP requests │ │ └ ─ XHR. Js browser environment create XMLHttpRequests request │ ├ ─ the cancel request │ │ │ ├─ ├─ ├─ ├.js │ │ ├─ ├─ ├.js │ ├─ ├.js │ ├─ ├.js │ ├─ ├.js │ ├─ ├.js │ ├─ ├.js │ ├─ ├.js │ ├─ ├.js │ ├─ ├.js │ ├─ ├.js │ ├─ ├.js │ ├─ ├.js │ ├─ ├.js │ ├─ ├.js Create a new Axios instance │ │ ├─ buildFullPath.js Returns the combined URL of baseURL and requestedURL │ │ ├─ createError.js create an error with the specified message, configuration, error code, request, and response │ │ ├─ enhanceError. Js Updated an error │ │ ├─ with the specified configuration, error codes, and responses │ │ ├─ mergeConfig. Js by merging two objects Object and returns a new combined │ │ ├ ─ settle. Js based on solving the response status or reject a Promise │ │ └ ─ transformData. Js conversion data format │ ├ ─ helpers auxiliary function │ │ ├ ─ bind. Js │ │ ├─ Combineurls.js │ │ ├─ combineurls.js Create a new URL by combining the specified URLS. │ │ ├─ ├─ IsAbsoluteUr.js warning │ │ ├─ IsAbsoluteUr.js │ │ ├─ isAxiosError │ │ ├─ Heavy Metal Flag School - Heavy metal Flag School - Heavy metal Flag School - Heavy metal Flag School Spread (function(x, y, z) {})([1, 2, 3]); │ │ ├─ ├─ customs.txt ├─ customs.txt │ ├─ customs.txt │ ├─ customs.txt │ ├─ customs.txt │ ├─ customs.txtCopy the code

The VSCode plugin ProjectTree outputs the ProjectTree

  • First look at the package.json file"main": "index.js", the entry file is the index.js file in the root directory
// index.js
module.exports = require('./lib/axios'); // the./lib/axios file is referenced
Copy the code

debugging

  • By the package. The json file"build": "NODE_ENV=production grunt build"The packaged build tool used here is Grunt; So if you modify a line of code, you can execute the command linegrunt buildrepack
  • By the package. The json file "examples": "node ./examples/server.js"As you can see, there is a test case built up and we just need to execute the command linenpm examplesCan;server.jsSet up a simple Node server at the address oflocalhost:3000

@@ Comment code in detail axios source code comment

The related resources

  • github
  • Chinese document
  • Axios source code