Promessa ricorsiva in javascript

Question

Sto scrivendo un Javascript Promise che trova l'URL di reindirizzamento finale di un collegamento.

Quello che sto facendo è una richiesta HEAD in un Promise utilizzando un XMLHttpRequest. Quindi, al caricamento, controlla lo stato HTTP per qualcosa nell'intervallo 300 o se ha un valore responseURL collegato all'oggetto e che l'URL è diverso da quello con cui è stato eseguito.

Se nessuna di queste condizioni è vera, I resolve(url). In caso contrario, chiamerò in modo ricorsivo getRedirectUrl() nell'URL della risposta e resolve().

Ecco il mio codice:

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; 
} 

Quindi per utilizzare questa funzione che faccio qualcosa di simile:

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

Il problema è che resolve(); in getRedirectUrl chiamerà l'then() dalla funzione chiamante prima di chiamare la chiamata ricorsiva getRedirectUrl e, a quel punto, l'URL è undefined.

Ho provato, piuttosto che p.then(...getRedirectUrl...) facendo return self.getRedirectUrl(...) ma questo non risolverà mai.

La mia ipotesi è che il modello che sto usando (che sostanzialmente ho inventato al volo) non è giusto, del tutto.

Answer 1

Il problema è che la promessa di ritorno da getRedirectUrl() deve includere l'intera catena di logica per ottenere l'URL. Stai solo restituendo una promessa per la prima richiesta. Lo .then() che stai utilizzando nel bel mezzo della tua funzione non sta facendo nulla.

Per risolvere questo problema:

Creare una promessa che si risolve in redirectUrl per un redirect, o niente altrimenti:

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

    xhr.onload = function() { 
     var redirectsTo; 

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

     resolve(redirectsTo); 
    }; 

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

Usa .then() su che di restituire la chiamata ricorsiva, o no, come necessario:

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

soluzione completa:

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() { 
      var redirectsTo; 

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

      resolve(redirectsTo); 
     }; 

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