javascript - javascript中的递归 promise

Question

我正在编写一个 Javascript Promise 来查找链接的最终重定向 URL。

我正在做的是使用 XMLHttpRequest 在 Promise 中发出一个 HEAD 请求。然后，在加载时，检查 300 范围内的某些内容的 HTTP 状态，或者它是否有附加到对象的 responseURL 并且该 url 不同于它是单手的。

如果这些都不是真的，我resolve(url)。否则，我在响应 URL 上递归调用 getRedirectUrl() 和 resolve()。

这是我的代码:

function getRedirectUrl(url, maxRedirects) {
    maxRedirects = maxRedirects || 0;
    if (maxRedirects > 10) {
        throw new Error("Redirected too many times.");
    }

    var xhr = new XMLHttpRequest();
    var p = new Promise(function (resolve) {
        xhr.onload = function () {
            var redirectsTo;
            if (this.status < 400 && this.status >= 300) {
                redirectsTo = this.getResponseHeader("Location");
            } else if (this.responseURL && this.responseURL != url) {
                redirectsTo = this.responseURL;
            }

            if (redirectsTo) {
                // check that redirect address doesn't redirect again
                // **problem line**
                p.then(function () { self.getRedirectUrl(redirectsTo, maxRedirects + 1); });
                resolve();
            } else {
                resolve(url);
            }
        }

        xhr.open('HEAD', url, true);
        xhr.send();
    });

    return p;
}

然后为了使用这个函数我做了类似的事情:

getRedirectUrl(myUrl).then(function (url) { ... });

问题是 getRedirectUrl 中的 resolve(); 会在调用 之前从调用函数调用 then() >getRedirectUrl 递归调用，此时 URL 为 undefined。

我试过了，而不是 p.then(...getRedirectUrl...) 做 return self.getRedirectUrl(...) 但这永远不会解决。

我的猜测是我正在使用的模式(我基本上是临时想到的)完全不正确。

Answer 1

问题是您从 getRedirectUrl() 返回的 promise 需要包括整个逻辑链才能到达 URL。您只是为第一个请求返回一个 promise 。您在函数中使用的 .then() 没有做任何事情。

解决这个问题:

创建一个解析为 redirectUrl 的 promise ，否则为 null:

function getRedirectsTo(xhr) {
    if (xhr.status < 400 && xhr.status >= 300) {
        return xhr.getResponseHeader("Location");
    }
    if (xhr.responseURL && xhr.responseURL != url) {
        return xhr.responseURL;
    }

    return null;
}

var p = new Promise(function (resolve) {
    var xhr = new XMLHttpRequest();

    xhr.onload = function () {
        resolve(getRedirectsTo(xhr));
    };

    xhr.open('HEAD', url, true);
    xhr.send();
});

根据需要在 that 上使用 .then() 返回或不返回递归调用:

return p.then(function (redirectsTo) {
    return redirectsTo
        ? getRedirectUrl(redirectsTo, redirectCount+ 1)
        : url;
});

完整解决方案:

function getRedirectsTo(xhr) {
    if (xhr.status < 400 && xhr.status >= 300) {
        return xhr.getResponseHeader("Location");
    }
    if (xhr.responseURL && xhr.responseURL != url) {
        return xhr.responseURL;
    }

    return null;
}

function getRedirectUrl(url, redirectCount) {
    redirectCount = redirectCount || 0;

    if (redirectCount > 10) {
        throw new Error("Redirected too many times.");
    }

    return new Promise(function (resolve) {
        var xhr = new XMLHttpRequest();

        xhr.onload = function () {
            resolve(getRedirectsTo(xhr));
        };

        xhr.open('HEAD', url, true);
        xhr.send();
    })
    .then(function (redirectsTo) {
        return redirectsTo
            ? getRedirectUrl(redirectsTo, redirectCount + 1)
            : url;
    });
}