Excuse me by promise after encapsulation ajax, return not readystate is 2 4 how to solve?-CodePudding

Good big! I was encapsulated with promise an ajax request, use the mock test data, the easy mock API management tools, with test interface link the data returned by the way, but you can't call the data returned, the readyState value is displayed in the process of the ajax request is 2 but it opens at the data object is shown in four, what is this?

 
//object request path 
Var root={
Method: 'GET', 
Url: 'https://easy-mock.com/mock/5faa09f7234c9b0d8babecde/example/mock', 
}; 
//packaging request method 
The function getInfo (requestObj) {
The return of new Promise ((resolve, reject)=& gt; {
Var XHR=null 
If (window. The XMLHttpRequest) {
XHR=new XMLHttpRequest (); 
} else {
XHR=new ActiveXObject (" Microsoft. XMLHTTP "); 
} 
XHR. Open (requestObj method, requestObj. Url); 
XHR. SetRequestHeader (" the content-type ", "application/x - WWW - form - urlencoded"); 
XHR. Onreadystatechange=function () {
If (XHR. ReadyState===4) {
If (XHR. Status>=200 & amp; & XHR. Status<{
=400)Resolve (enclosing the response); 
} else {
Reject this. (status); 
} 
} else {
Reject (this); 
} 
} 
XHR. The send (); 

}) 
} 
//execution request 
GetInfo (root). Then ((res)=& gt; {
The console. The log (res) 
}). The catch ((e)=& gt; {
//request failed error 
The console. The log (e) 
});

CodePudding user response:

XHR. Onreadystatechange is itself will be triggered in a row, respectively to the readyState several state, you if readyState! Reject=4, that you have been reject this is doomed to catch, never reach the resolve, and then let then handle

 
//so you knew that it has changed, and it is going to 4 
XHR. Onreadystatechange=function () {
The console. The log (' readystatechange: '); 
The console. The log (enclosing readyState); 
The console. The log (' -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- '); 
}

The simplest is

 
If (XHR. ReadyState===4) {
If (XHR. Status==200) {
Resolve (enclosing the response); 
} else {
Reject this. (status); 
} 
}

And then you say readyState into 4, here for your error code does not move, just tell you why

 
If (XHR. ReadyState===4) {
If (XHR. Status>=200 & amp; & XHR. Status<{
=400)Resolve (enclosing the response); 
} else {
Reject this. (status); 
} 
} else {
/* * 
* because you reject this is an object, it is a reference type, so, it will continue to change in subsequent readystatechange 
* you question the readyState value into 4, is it the last time the value of the trigger readystatechange latest 
*/
//reject (this); 

/* * 
* if you deep copy, cut off its reference relationship, see later you say value is 4 wouldn't have happened, 
* I used here is the extend of jQuery method to realize the depth of the copy 
* 
* or you directly like this, because this. ReadyState is a value type, you reject directly, it is the value of the 
* reject (enclosing readyState); 
*/
Reject ($. The extend ({}, this)); 
}

CodePudding user response:

Well solved, ignoring the process of from 0 to 4 thanks to explain!