Question

我正在将对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 fail函数中）

console.log('ajax error = ' + err );

我做错什么了吗？

Answer 1

承诺

通常会先触发then，然后再触发catch：这意味着您的then处理程序代码遇到了一些错误，因此catch被触发。 Catch处理程序将触发：

如果异步操作中有错误，则Promise被拒绝。
如果以前的then处理程序中有错误。

因此，以下代码：

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

将从then和catch处理程序中获取收益日志。

您的代码

您的then处理程序中包含以下代码：

    else { 
        let html = response.commentHTML;
        console.log('html returned' + html)
        jQuery(form).append(html);
        Jquery(form).remove();
    }

请注意，最后一行是Jquery，而不是jQuery，这是一个错字。我敢打赌这是导致catch触发的错误。

最重要的是

现代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 then和catch处理程序中处理成功和失败，而不用传递success和fail回调来解决或拒绝换行答应。

ajax成功参数

success回调参数采用三个参数。但是，承诺通常只需一个。

但是，jQuery确实将相同的三个参数传递给then处理程序，因此，如果需要访问它们，仍可以在处理程序中使用它们：

this.commentAPI('dt_submitAjaxComment', encodedJSON).then(function(data, code, jqXhr){
 // the three arguments will be accessible here.
...
}

JavaScript Promise .then（）和.catch同时触发

1 个答案:

承诺

您的代码

最重要的是

ajax成功参数