On axios and ajax and fetch the principles
of the three are in fact used to request data, and that the difference in where they do? In fact axios ajax and
are packaged on XMLHttpRequest object; the fetch is a method in a window, is a lower-level methods.
ajax
fact, the focus is a first instance of the XMLHttpRequest object, to establish a connection with the open method wherein; Send method for transmitting data (background distal spread); listening then use onreadystatechange readyState changes when it is 4, the representative of the request is complete; simple code is implemented as follows:
Ajax = {const
GET: function (URL, Fn) {
// the XMLHttpRequest object is used to exchange data with the server in the background
var = new new XHR the XMLHttpRequest ();
xhr.open ( 'the GET', URL, to true);
xhr.onreadystatechange = function () {
// 4 illustrate the readyState request has been completed
IF (4 && xhr.readyState == == 200 is xhr.status) {
// get the data from the server
fn.call (the this, xhr.responseText);
}
};
xhr.send ();
},
// and data T. should be 'a = a1 & b = b1 ' this string format, if the data object in jq automatically this object into a string format
post: function (url, Data, Fn) {
var = new new XHR the XMLHttpRequest ();
xhr.open ( "the POST", URL, to true);
// add http header, the server transmits content information to the encoding type
xhr.setRequestHeader ( "content-type", "application / x-www-form -urlencoded");
= function xhr.onreadystatechange () {
IF (xhr.readyState ==. 4 && (== 200 is xhr.status)) {
fn.call (the this, xhr.responseText);
}
};
xhr.send (Data);
}
}
. 1
2
. 3
. 4
. 5
. 6
. 7
. 8
. 9
10
. 11
12 is
13 is
14
15
16
. 17
18 is
. 19
20 is
21 is
22 is
23 is
24
25
26 is
27
28
Axios
Axios ajax is in fact based on the added promise, as follows:
const myAxios = {
get: function(url) {
return new Promise((resolve, reject) => {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
resolve(xhr.responseText)
}
};
xhr.send();
})
},
. 1
2
. 3
. 4
. 5
. 6
. 7
. 8
. 9
10
. 11
12 is
13 is
14
fetch
uses fetch do not repeat herein, there are many aspects of this document. fetch first did not want to ajax, like the need to introduce jq; if you want to achieve their own ajax it, step relative to fetch is also quite cumbersome; at the same time fetch also joined the promise, to solve the problem of callback hell; use fetch simple, but there are some problems requires attention:
pass the cookie
must be added in the header parameters which credientials: 'include', the current will be such as cookies xhr request to go to the
different xhr and fetch the
fetch conventional method, although the bottom, but still lacks some common xhr, such as the ability to cancel request (ABORT) method
fetch server returns 4xx, 5xx error is thrown when not needed here by hand, is determined by the response to the field and the status field ok
------------- ---
Disclaimer: this article is CSDN blogger original article "qq_39096319", and follow CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.
Original link: https://blog.csdn.net/qq_39096319/article/details/82347033