Source code analysis from xhr to axios (4)

I'm a bit busy lately, so I haven't updated it for a long time.
Today we are talking about the source code of axios. Since we are talking about the source code, we must first download a source code.
Let’s look at the directory

  • /dist/ --------------------------------- Project output directory
  • /lib/ -----------------------------------Project source code directory
    • /adapters/ -------------------------Define request configurator (xhr, http)
      • https.js ---------------------------Implement http adapter
      • xhr.js ------------------------------Implement xhr adapter
    • /cancel/ -----------------------------Define the cancel function
    • /core/ --------------------------------Some core functions
    • Axios.js ----------------------------- The core of axios
    • dispatchRequest.js --------------The function used to call the http request adapter method to send the request
    • interceptorManager.js -----------Interceptor manager
    • settle.js ------------------------------According to the http response status, change the status of Promise
    • /helpers/ -----------------------------Some auxiliary methods
    • axios.js ------------------------------The axios method used by the outside world
    • defaults.js -------------------------- The default configuration of axios
    • utils.js -------------------------------Public tool
    • package.json ----------------------Project information
    • index.d.ts ---------------------------Configure ts declaration file
    • index.js ------------------------------Entry file

We mainly
Insert picture description here
talk about the files under lib. Here is the file we actually use to send the request. xhr.js is mainly used to send the requested file. Here we used what we said before to create an xhr object
http.js is mainly used to send the requested file on the server side. So axios can send requests both on the browser side and on the server side.

adapters/xhr.js

xhr.js exposes a xhrAdaper method, which returns a promise method
Insert picture description here

cancel

1.cancel.js

Used to cancel the request.
If the request is cancelled, an error will be returned, and the return value is cancel() here.

2.iscancel.js

Used to determine whether the returned error is a cancel type
Insert picture description here

3.cancelToken.js

Insert picture description here

Source code analysis

1. The relationship between axios and Axios
1) Syntactically speaking: axios is not an instance of Axios
2) Functionally speaking: axios is an instance of Axios
3) Axios is an attribute returned by the Axios.prototype.request function bind()
4) Axios As an object, there are all the methods on the prototype of Axios and all the attributes on Axios.
Insert picture description here
2. The difference between instance and axios
1) Same
(1) At the same time a function that can send any request
(2) Can send a specific request get()/ post()/delete()/request()
(3) There are default configuration and interceptor properties defaults/interceptors
2) Different
(1) The default matching value is likely to be different
(2) Instance does not have axios after adding it Method: create()/CancelToken()/all()

Guess you like

Origin blog.csdn.net/lbchenxy/article/details/106328929