【问题标题】:Resolve/Reject Promis within external callback在外部回调中解决/拒绝 Promis
【发布时间】:2023-04-09 03:35:01
【问题描述】:

我正在使用 ajax 和迭代承诺来为 ajax 调用创建一个抽象版本。下面的代码工作正常。

function ajax(url){
    var xhr = {
        rq : function (method, url){
            var prom = new Promise(function (resolve, reject){
                var client = new XMLHttpRequest();
                //only accept 
                client.open(method,url,true);
                client.send();
                client.onload = function (){
                    if(this.status == 200){
                        if(this.response == "1"){
                            reject(this.response);
                        }
                        else{
                            resolve(this.response);
                        }
                    }
                    else{
                        reject(this.statusText);
                    }
                };
            });
            return prom;
        }
    };
    return {
        'get' : function(){
            return xhr.rq('GET', url);
        }
    };
}

但是我想抽象 ajax.onload 上的函数作为回调传递,我正在考虑这样的事情:

function ajax(url, checker){
    var xhr = {
        rq : function (method, url){
            var prom = new Promise(function (resolve, reject){
                var client = new XMLHttpRequest();
                //only accept 
                client.open(method,url,true);
                client.send();
                client.onload = checker;
                };
            });
            return prom;
        }
    };
    return {
        'get' : function(){
            return xhr.rq('GET', url);
        }
    };
}

function chk1(){
    if(this.status == 200){
        if(this.response == "1"){
            reject(this.response);
        }
        else{
            resolve(this.response);
        }
    }
    else{
        reject(this.statusText);
    }
}

不幸的是,我收到了解决和拒绝未知的错误。我有点知道问题只是在 chk1 内不知道承诺。但是,我不确定如何解决它。

我希望能够这样称呼它:

Promise.all([ajax(u,chk1).get(),ajax(v,chk1).get()])
.then(callback.success)
.catch(callback.error);

亲切的问候

【问题讨论】:

  • 您可能需要像client.onload = checker.bind(this,resolve,reject) 这样才能在检查器回调中引用 promise 的 resolve 和 reject 回调..

标签: javascript ajax callback promise


【解决方案1】:

您可以将resolvereject 传递给检查器函数,以便它可以根据需要调用它们。

function ajax(url, checker) {
    var xhr = {
        rq: function(method, url) {
            var prom = new Promise(function(resolve, reject) {
                var client = new XMLHttpRequest();
                //only accept 
                client.open(method, url, true);
                client.send();
                client.onload = function() {
                    checker.call(this, resolve, reject);
                };

            });
            return prom;
        }
    };
    return {
        'get': function() {
            return xhr.rq('GET', url);
        }
    };
}

function chk1(resolve, reject) {
    if (this.status == 200) {
        if (this.response == "1") {
            reject(this.response);
        } else {
            resolve(this.response);
        }
    } else {
        reject(this.statusText);
    }
}

【讨论】:

  • 非常感谢!但我发现我也必须将其更改为参数。
  • @Snake707 - 我已经解决了这个问题,所以this 被保留了。
  • @Snake707 - 您发布的解决方案将无法正常工作,因为它不会在正确的时间调用checker()(它会调用它太早)。此外,如果此解决方案解决了您的问题,您可以单击答案左侧的绿色复选标记以向社区表明这一点。
【解决方案2】:

献给仍然在乎的人。 jfriend00 的答案是金子。我的最终解决方案看起来像这样(我不得不从使用这个更改为另一个参数):

function ajax(url, checker){
    var xhr = {
        rq : function (method, url){
            var prom = new Promise(function (resolve, reject){
                var client = new XMLHttpRequest();
                //only accept 
                client.open(method,url,true);
                client.send();
                client.onload = checker(resolve, reject, client);
                });
            return prom;
        }
    };
    return {
        'get' : function(){
            return xhr.rq('GET', url);
        }
    };
}

function chk1(resolve, reject, xhr){
    if(xhr.status == 200){
        if(xhr.response == "1"){
            reject(xhr.response);
        }
        else{
            resolve(xhr.response);
        }
    }
    else{
        reject(xhr.statusText);
    }
}

【讨论】:

  • 这行不通。 client.onload = checker(resolve, reject, client); 将立即调用checker(),而不是在onload 事件发生时。
  • 谢谢!我现在明白了。
猜你喜欢
  • 2014-08-10
  • 2019-09-15
  • 2015-09-27
  • 1970-01-01
  • 2015-12-29
  • 2019-11-19
  • 2011-08-15
  • 2023-03-26
  • 2020-09-17
相关资源
最近更新 更多