javascript - 在 promise 中中止 ajax 请求

标签 javascript ajax promise cancellation

我正在构建表单验证并学习 promise 我决定使用 promise 模式实现异步验证功能:

var validateAjax = function(value) {
    return new Promise(function(resolve, reject) {
        $.ajax('data.json', {data: {value: value}}).success(function(data, status, xhr) {
            if (data.valid) {
                resolve(xhr)
            }
            else {
                reject(data.message)
            }
        }).error(function(xhr, textStatus) {
            reject(textStatus)
        })
    })
}

//...
var validators = [validateAjax];
$('body').delegate('.validate', 'keyup', function() {
    var value = $('#the-input').val();
    var results = validators.map(function(validator) {
        return validator(input)
    });

    var allResolved = Promise.all(results).then(function() {
        //...
    }).catch(function() {
        //...
    })
});

这似乎工作正常,输入被验证为用户类型(代码被简化不会太长,例如缺少 keyup 后的超时等)。

现在我想知道如果前一个 keyup 事件的验证仍在进行中,如何终止 ajax 请求。是否有可能以某种方式检测到 promise 处于何种状态并可能从外部拒绝该 promise?

最佳答案

Promise 取消目前正在规范中,还没有内置的方法来做到这一点(虽然它即将到来)。我们可以自己实现:

var validateAjax = function(value) {
    // remove explicit construction: http://stackoverflow.com/questions/23803743
    var xhr = $.ajax('data.json', {data: {value: value}}); 
    var promise = Promise.resolve(xhr).then(function(data){
         if(!data.isValid) throw new Error(data.message); // throw errors
         return data;
    });
    promise.abort = function(){
       xhr.abort();
    };
    return promise;
}

现在,我们可以通过在 promise 上调用 abort 来终止 validateAjax 调用:

var p = validateAjax("..."); // make request
p.abort(); // abort it;

关于javascript - 在 promise 中中止 ajax 请求,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32497035/

相关文章:

javascript - <ul><li> 中的数组使用 JQuery

javascript - 为 div 创建线性透明渐变

javascript - Angular 2.4.0 路由器 : Named route. 错误:无法匹配任何路由

javascript - jQuery 绑定(bind) ajax :success not working in rails 3 app for newly created (ajax) items

javascript - browser.get() 不起作用

javascript - 是否可以在 Promise.all 稍后向数组添加 Promise?

php - 旋转见证

php - jQuery .on 事件触发器对于两种表单的工作方式不同?

javascript - ajax完成后如何调用Jquery函数

ajax - jQuery $when.apply() .. then() 为每个完成的请求触发