Axios source code analysis notes

1. Preface

I often use axios, you need to know how powerful axios is than ajax, and why!
It is recommended to read this article: In- depth analysis of Axios source code-the new king of AJAX

2. Axios advantage

Interceptor interceptors
convert
http request: use http[s].request for node and XHR for html

3. Axios notes

1. Different from jquery

jquery will generate multiple objects, while axios generally only generates a singleton when it is referenced. You can also use the create function to personalize it.

Essence:
Return a fn, so that fn meets the following conditions:
fn instanceof Axios;
fn.static === Axios.prototype.bind(context);
fn.this extend

2. Multi-level configuration

default->method:get->this.default->request config

The article asks when default and this.default are different?
I think: The import is the same, if you call the create function again, it will be different.

3. How to block

Mainly the chain array implementation: [request, default, response], plus promise. then to achieve

4. Call

Whether it is called directly or called get or post, the Axios.prototype.request function is ultimately called

5. Cancel the request

The principle is to call the abort of http and set the promise status to reject

6. Timeout, cross-domain

request.withCredentials = true;
axios.defaults.timeout = 3000;

7. Validation rules, data conversion

These are all implemented in the state of the chain.

4. Summary

1. Why can use add interceptor by itself?

Use is a static function.
Use will eventually be added to the chain array,
and each call is called Axios.prototype.request
so that when it is called, there is a corresponding interception function.

2. How to expand

default The default configuration, there are four cascade boxes, can be personalized configuration.
Attribute and function configuration: then please refer to **4.1<Why can use add interceptor by yourself>**

Guess you like

Origin blog.csdn.net/a519991963/article/details/114367476