ajax then catch,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;

this.removeErrorHtml(form);

// 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 );

this.commentAPI('dt_submitAjaxComment', encodedJSON).then(function(response){

console.log('firing then');

if( response.error == true ) {

self.printFormError(form, response.errorMsg);

}

else {

let html = response.commentHTML;

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.

>如果先前的处理程序中存在错误.

那么,以下代码：

Promise.resolve()

.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

});

将从那时开始生成日志并捕获处理程序.

你的代码

在你的处理程序里面有这样的代码：

else {

let html = response.commentHTML;

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处理程序,因此如果您需要访问它们,您仍然可以在处理程序中使用它们：

this.commentAPI('dt_submitAjaxComment', encodedJSON).then(function(data, code, jqXhr){

// the three arguments will be accessible here.

...

}

标签：javascript,ajax

来源： https://codeday.me/bug/20190527/1161917.html