Shulou(Shulou.com)06/03 Report--

This article introduces the knowledge of "how to use Axios". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

First, four consecutive questions of the soul

1.1 Why read the source code

1.2 how to select a project

1.3 how to read the source code

1.4 are there any actual cases?

Second, how to read Axios?

2.1 Walk into Axios

Axios is a Promise-based HTTP client that supports both browser and Node.js environments. It is an excellent HTTP client, which is widely used in a large number of Web projects.

As can be seen from the above picture, the Star number of Axios project is "78.1K", and the number of Fork is as high as "7.3K". It is an excellent open source project, so it is worth reading carefully.

2.2 discover the beauty of Axios

After confirming that Axios is a "pursuit goal", the next step is to discover its strengths (features):

Everyone has different views on "beauty". For Brother Po, I have my eye on the three points that have been selected in the picture. Therefore, they are also honored to be the three entry points for reading the source code. Of course, the more entry points, the better. You can first find the place you are most interested in as the entry point. It is important to note that if there is a connection between pointcuts, a simple sort is recommended.

2.3 feel the beauty of Axios

After choosing the entry point, we can begin to experience the beauty of Axios design one by one. Taking the entry point of "being able to intercept requests and responses" as an example, we will first come into contact with the concept of "interceptor". So we need to understand what the interceptor is, what it does, and how to use it. Here we can start with the "official documentation" of the project or the "README.md" document in the project.

2.3.1 the role of the interceptor

Axios provides a request interceptor and a response interceptor to handle the request and response, respectively, for the following purposes:

Request interceptor: the function of this interceptor is to uniformly perform certain operations before the request is sent, such as adding a token field to the request header.

Response interceptor: the function of this kind of interceptor is to perform some operations uniformly after receiving the response from the server, such as automatically jumping to the login page when the response status code is 401.

2.3.2 use of interceptors

/ / add request interceptor-process request configuration object axios.interceptors.request.use (function (config) {config.headers.token = 'added by interceptor'; return config;}); / / add response interceptor-process response object axios.interceptors.response.use (function (data) {data.data = data.data +'-modified by interceptor'; return data;}) Axios ({url:'/ hello', method: 'get',}) .then (res = > {console.log (' axios res.data:', res.data)})

After understanding the role and usage of the interceptor, we will focus on the "axios" object, because registering the interceptor and sending requests are closely related to it. However, before looking at the specific source code, Brother A Bao suggests combing the function points first. The following are the analytical ideas of Brother Po:

The function of Axios is to send HTTP request. Request interceptor and response interceptor correspond to different stages of HTTP request, and their essence is a function that implements specific functions. At this point, we can split the HTTP request into different types of subtasks according to the function, such as "subtask to process the request configuration object", "subtask to send the HTTP request" and "subtask to process the response object". When we execute these subtasks in the specified order, we can complete a complete HTTP request.

Now that tasks have been mentioned, we will think of the basic functions of the task management system: task registration, task scheduling (prioritization), task scheduling, and so on. Therefore, we can analyze the implementation of Axios interceptor from three aspects: task registration, task scheduling and task scheduling.

2.3.3 Task Registration

/ / add request interceptor-process request configuration object axios.interceptors.request.use (function (config) {config.headers.token = 'added by interceptor'; return config;}); / / add response interceptor-process response object axios.interceptors.response.use (function (data) {data.data = data.data +'-modified by interceptor'; return data;})

Under the lib/axios.js path, we can find the definition of the "axios" object. In order to intuitively understand the relationship between objects, Brother A Bao suggests that we should draw more hands-on drawings in the process of reading the source code. For example, Brother Po uses the following figure to summarize the internal structure and relationship between Axios objects and InterceptorManager objects:

2.3.4 Task scheduling

Now we know how to register interceptor tasks, but just registering tasks is not enough. We also need to choreograph the registered tasks to ensure the order in which they are executed.

Similarly, for task scheduling, you can also use the form of a graph to show the results of task scheduling. "A little trick here is that you can show the results of task scheduling in the form of comparison, so that the processing logic of task scheduling will be clearer. "

2.3.5 Task scheduling

After the task is choreographed, to initiate the HTTP request, we also need to schedule the task in the order in which it is scheduled.

It is important to note that when reading the source code, don't pay too much attention to the details. For example, when studying the principle of Axios interceptor, you don't need to know any more about the specific implementation behind "dispatchRequest". You just need to know that this method is used to send HTTP requests, so that the whole line will not be stretched too long.

After analyzing the specific function points, you may have read the specific source code. But Brother A Bao thinks that this is not the most important thing. "what's more important is to think about its design idea, what are the benefits of this design, and whether there is anything we can learn from and learn from." For example, with reference to the design model of the Axios interceptor, we can extract the following general task processing model:

Brother Po above took the interceptor of Axios as an example to share the ideas and skills of reading Axios source code. Next, Brother Po, let's share some suggestions and aids for reading the source code.

Third, suggestions on reading the source code

IV. Auxiliary tools for reading source code

If you are interested in the following assistive tools, you can directly open the online address of each tool through the link from the following image source.

(photo Source: https://www.processon.com/view/link/5f6d2beff346fb166d0ac4fd)

V. Summary

In fact, in addition to the above, there are a lot of things to pay attention to when reading excellent open source projects. Brother Po summed up a mind map when learning the source code of the BetterScroll project:

(photo Source: https://www.processon.com/view/link/5f6d2beff346fb166d0ac4fd)

Below, Brother Po uses a picture to summarize the learning routes of axios and better-scroll, two open source projects:

1. The entry point of the Axios project is screened out from the functional features in Github.

2. The entry point of BetterScroll is found in the feature highlights introduced in the article "BetterScroll 2.0 release: Excelsior, Walking with you" on the Nuggets.

In addition, Brother Po also briefly summarizes the ideas and skills of reading the source code introduced in this article:

Stand on the shoulder of the giant and read some high-quality articles about the project in advance.

Summarize the problems encountered in study or work, and carry out source code learning with problems.

Clearly read the main line or cut-in point of the source code

Analyze each function point from a simple example as much as possible

Sort out the main process first, don't pay too much attention to the details, and avoid pulling the whole line too long.

In the process of reading the source code, draw a lot of pictures, so that it will be more intuitive to understand.

This is the end of "how to use Axios". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.