ajaxthencatch,JavaScript承诺.then（）和.catch同时触发我正在将关于wordpress的评论转变为ajax驱动的系统.
到⽬前为⽌⼀切都很好，直到我遇到.catch()⽅法在.then()⽅法之后直接触发的问题.
这是我的代码……
Ajax引擎
commentAPI: function(action, encoded, userID) {
let self = this;
return new Promise(function (resolve, reject) {
//console.log("ajax call to " + self.ajaxURL + " with action " + action);
jQuery.ajax({
url: self.ajaxURL,
type: 'post',
data: 'action='+action+'&data='+encoded,
dataType: 'json',
success: function(data, code, jqXHR) { resolve(data); },
fail: function(jqXHR, status, err) { console.log('ajax error = ' + err ); reject(err); },
beforeSend: function() {} //display loading gif
});
});
},
处理评论表单提交的⽅法
handleReplyFormSubmit: function(form) {
let self = this;
// Serialize form to name=value string
const formdata = jQuery(form).serialize();
// Validate inputs
// * WordPress doing this for now and providing error resonse
// Encoode data for easy sending
const encodedJSON = btoa( formdata );
thismentAPI('dt_submitAjaxComment', encodedJSON).then(function(response){
console.log('firing then');
if( == true ) {
self.printFormError(form, Msg);
}
else {
let html = responsementHTML;
console.log('html returned' + html)
jQuery(form).append(html);
Jquery(form).remove();
}
}).catch(function(err) {
console.log('firing catch');
if( err !== undefined && err.length > 0 ) {
self.printFormError(form, err);
}
else {
self.printFormError(form, 'Unkown error');
}
});
return false;
},
代码正在做它应该做的事情，但是catch⽅法也被解雇了，这使得错误处理令⼈沮丧……
注意这是如何被解雇的
console.log('firing catch')
但这不是(在ajax失败函数内)
console.log('ajax error = ' + err );
难道我做错了什么？
解决⽅法:
承诺
通常会触发然后触发：这意味着在当时的处理程序代码中遇到了⼀些错误，因此catch会触发. Catch处理程序将触发：>如果异步操作中存在错误，则拒绝Promise.
>如果先前的处理程序中存在错误.
那么，以下代码：
.then( () => {
console.log('this will be called');
throw new Error('bum');
console.log('this wont be logged');
})
.catch(err => {
console.log('this will be logged too');
console.log(err); // bum related error
});
将从那时开始⽣成⽇志并捕获处理程序.
你的代码
在你的处理程序⾥⾯有这样的代码：jquery ajax例子
else {
let html = responsementHTML;
console.log('html returned' + html)
jQuery(form).append(html);
Jquery(form).remove();
}
注意最后⼀⾏是如何使⽤Jquery⽽不是jQuery，这是⼀个错字.我敢打赌这是导致⽕灾发⽣的错误.最重要的是
jQuery的现代版本只返回$.ajax()的承诺，因此不需要将它包装到另⼀个承诺中.
这段代码：
commentAPI: function(action, encoded, userID) {
let self = this;
return new Promise(function (resolve, reject) {
//console.log("ajax call to " + self.ajaxURL + " with action " + action);
jQuery.ajax({
url: self.ajaxURL,
type: 'post',
data: 'action='+action+'&data='+encoded,
dataType: 'json',
success: function(data, code, jqXHR) { resolve(data); },
fail: function(jqXHR, status, err) { console.log('ajax error = ' + err ); reject(err); }, beforeSend: function() {} //display loading gif
});
});
},
应该只是：
commentAPI: function(action, encoded, userID) {
return jQuery.ajax({
url: this.ajaxURL,
type: 'post',
data: 'action='+action+'&data='+encoded,
dataType: 'json',
beforeSend: function() {} //display loading gif
});
},
因此，您可以处理commentApi中的成功和失败，然后捕获处理程序,⽽不是传递成功和失败回调来解析或拒绝包装Promise. ajax的成功助⼿
成功回调参数有三个参数.然⽽,Promises通常只需要⼀个.
但是,jQuery确实将相同的三个参数传递给then处理程序，因此如果您需要访问它们，您仍然可以在处理程序中使⽤它们：thismentAPI('dt_submitAjaxComment', encodedJSON).then(function(data, code, jqXhr){
// the three arguments will be accessible here.
...
}
标签：javascript,ajax