Ajax请求取决于第一个(然后.)

Question

我正在尝试使用第一个函数来检查该项是否存在，以及是否可以将该项添加到PHP$_session中。

我希望在$_Session中最多有3个项目，如果该项目存在于会话中，它将返回1。以便收藏夹功能可以更新会话中属于项目ID的信息。$_Session有一个多维数组，该数组包含项目的id和项目的属性数组。稍后，当侧边栏打开时，我会收到一个ajax调用请求，请求会话中的所有相关信息，然后查询到我的SQL，以获得最新信息。然后PHP清理代码并将其作为JSON发送回，Javascript对其进行解析以将其放在侧边栏中。

我一直在想如何使用JavaScript中的".then"选项来实现这一点，但我没有进一步了解。

(我在代码中添加了一些注释，解释了它的作用以及它应该从PHP/$_SESSION中得到什么)

function favoriteNr(){
var xhr = new XMLHttpRequest();
var door_param = gup( 'name' );
xhr.open('POST', '/nr_check.php', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('X-Requested-With', 'XMLHtppRequest');
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200){
var result = xhr.responseText;
console.log('Result: ' + result);
var favoriteNr = result; // returns a number, between 0 to 2 it should let the other function run otherwhise it should run the alert function
}
};
xhr.send("door=" + door_param); }
function favorite(){
var parent = this.parentElement;
var xhr = new XMLHttpRequest();
var door_param = gup( 'name' ); //Gets the value "name" from URL
xhr.open('POST', '/favorite.php', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('X-Requested-With', 'XMLHtppRequest');
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200){
var result = xhr.responseText;
//console.log('Result: ' + result);
if(result == 'color') {
parent.classList.remove("favorite");
}
}
};
xhr.send("door=" + door_param + "&color=" + parent.id); //This is parsed by php and put into a $_session
//console.log("door=" + door_param + "&uncolor=" + parent.id);

}   
function sbfSwitch(){ // should only be run if trying to add 1 more item and we already have 3 items in the session
SBF1.style.display = "none";
SBF2.style.display = "block";
alert('Please delete one of the doors in the side menu, before adding  anymore. There is a MAX of 3 Doors that you can favorite.');
getFavorites();
}

Answer 1

使用fetch，您的前两个函数将是

function favoriteNr() {
var body = new FormData();
body.append('door', gup('name'));
return fetch('/nr_check.php', { 
method: 'POST',
headers: new Headers({
'Content-type': 'application/x-www-form-urlencoded',
'X-Requested-With': 'XMLHtppRequest'
}),
body: body
})
.then(function(response) {
if (!response.ok) {
throw new Error('Network status ' + response.status + ':' + response.statusText)
}
return response.text();
})
function favorite() {
var parent = this.parentElement;
var body = new FormData();
body.append('door', gup('name'));
body.append('color', parent.id);
return fetch('/favorite.php', { 
method: 'POST',
headers: new Headers({
'Content-type': 'application/x-www-form-urlencoded',
'X-Requested-With': 'XMLHtppRequest'
}),
body: body
})
.then(function(response) {
if (!response.ok) {
throw new Error('Network status ' + response.status + ':' + response.statusText)
}
return response.text();
})
.then(function(result) {
if(result == 'color') {
parent.classList.remove("favorite");
}
});
}
favoriteNr()
.then(result) {
var n = parseInt(result);
if (n >=0 && n <=2) {
return favorite();
}
sbfSwitch();
}

Answer 2

所以一直在研究一些示例获取代码(仍然不是完全干净)，但结果会是这样吗？

var request = new Request('/nr_check.php',{
method: 'POST',
mode: 'cors', //what is this and do i need it?
redirect: 'follow',// same
headers: new Headers({
'Content-Type': 'text/plain'
'X-Requested-With', 'XMLHtppRequest' //is this still necessary? 
})
});
xhr.send("door=" + door_param); // where those this go now?
fetch(request).then(function(favorite){
if(request.result <= 3){
favorite();
} else {
sbfSwitch();
}
});