javascript - 调用 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");
        });

问题出在我的 promise 中，我可以看到它在那个 if 条件下进行并正确地从服务器获得响应(因为 console.log)。然而，另一方面，它根本没有进入“当时”的 promise (甚至一次都没有)。由于某种原因，它被拒绝了。我快疯了，因为我看到它执行了应该解决它的位，但那时我没有得到任何东西。任何帮助将不胜感激。

编辑:

现在我只运行了一次。这是我的 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 resolution的一点是，一旦rejected或者resolved，就不能再rejected或者resovled

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

只有当状态为 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();
}

as a side note about something that works but looks wrong

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

this inside the promise constructor callback could be window, or it even could even be undefined in strict mode - you need to fix that code before it causes issues down the track