调用 Resolve 函数转到 JavaScript Promise 中的 Reject 函数

Question

我有以下代码：

return new Promise (function (resolve,reject) {
        if (this.ImageData && averageColor) {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
                    console.log("Image found");
                    resolve(xhr.response);
                }else {
                    console.log("Image not found");
                    reject();
                }
            }
            xhr.open('GET', 'http://localhost:8765/color/'+averageColor, true);
            xhr.send(null);
        }
        else {
            reject();
        }
    });

调用这段代码的函数如下：

var v =  tile.getImage(tile.getColorAverage());
        v.then(function (value) {
            console.log("laughing");
        }).catch(function () {
           console.log("Catch called");
        });

问题在于我的承诺，我可以看到它处于 if 条件并正确地从服务器获取响应（因为 console.log）。然而，另一方面，它根本没有进入“当时”的承诺（甚至一次都没有）。由于某种原因，它会被拒绝。我要疯了，因为我可以看到它执行了应该解决它的位，但那时我什么也没得到。任何帮助将不胜感激。

已编辑：

现在我只运行了一次。这是我的 console.log 跟踪。现在更加困惑：

Answer 1

xhr.onreadystatechange = function () {
    if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
        console.log(xhr.response);
        resolve(xhr.response);
    }else {
        reject();
    }
}

关于 onreadystatechange 的事情是，它被多次调用

关于promise解决的事情是一旦rejected或者resolved，就不能再rejected或者resovled了

第一次调用 onreadystatechange 时，状态将是 1，而不是 4 ...所以你拒绝

只有当 status 为 4 并且 (DONE) AND status != 200 时，您才应该拒绝

xhr.onreadystatechange = function () {
    if (xhr.readyState == XMLHttpRequest.DONE) {
        if(xhr.status == 200) {
            console.log(xhr.response);
            resolve(xhr.response);
        } else {
            reject();
        }
    }
}

或者，使用 onload/onerror - 尽管您仍然需要检查 onload 中的 status == 200

xhr.onload= function () {
    if(xhr.status == 200) {
        console.log(xhr.response);
        resolve(xhr.response);
    } else {
        reject();
    }
}


xhr.onerror= function () {
    reject();
}

作为一些有用但看起来不对的东西的旁注

return new Promise (function (resolve,reject) {
    if (this.ImageData && averageColor) {

promise 构造函数回调中的this 可以是window，甚至在严格模式下甚至可以是undefined - 您需要在它导致问题之前修复该代码

Answer 2

您遇到此问题的原因是 onreadystatechange 在请求完成之前被多次调用，在它完成之前，您将获得调用 reject 的 else 条件。只有在DONE AND xhr.status != 200 时，您才应该拒绝。这是一个例子：

if (xhr.readyState == XMLHttpRequest.DONE) {
    if (xhr.status == 200) {
        resolve(xhr.response);
    } else {
        reject();
    }
}

Answer 3

Promise 构造函数中的this 是window，除非专门设置为不同的值。 this.ImageData 将评估为 false 而不将 this 设置为在调用 new Promise() 时将 .ImageData 作为属性的对象。

用 Promise 构造函数解析器函数中的 this.ImageData 替换对具有属性 ImageData 的对象的引用。

例如

function resolver(resolve, reject) {

}

new Promise(resolver.bind(/*object that has `.ImageData` as property*/))

另外，用load 事件替换readystatechange 事件，并为XMLHttpRequest 对象包含error 事件处理程序。