Dynamische AJAX-Versprechungskette mit jQuery

Question

Meine AJAX-Aufrufe sind innerhalb einer for-Schleife aufgebaut. Sie müssen in Ordnung sein (synchron). Wie verknüpfe ich sie mit jQuery?

Answer 1

Die Lösung for mit zu verkürzen:

var array = ['One', 'Two', 'Three']; 
var id = array[0]; 
var data = getData(id); 
for (var i = 1; i < array.length; i++) { 
    // Or only the last "i" will be used 
    (function (i) { 
     data = data.then(function() { 
      return getData(array[i]); 
     }); 
    }(i)); 
} 

// Also, see how better the getData can be. 
function getData(id) { 
    return $.ajax({ 
     url: 'http://example.com/' + id, 
     dataType: 'jsonp', 
    }).done(function(d) { 
     var response = d; 
     console.log(d); 
    }).fail(function() { 
     alert('ERROR'); 
    }); 
} 

By the way, wenn Sie eine richtige Versprechen Bibliothek, wie bluebird verwendet, dann würden Sie den folgenden Code verwenden:

var array = ['One', 'Two', 'Three']; 
Promise.reduce(array, function(data, id) { 
    return data.promise.then(function(result) { 
     return { promise: getData(id), results: data.results.push(result) }; 
    }); 
}, []).then(function(data) { 
    console.log(data.results); // yay! 
}); 

function getData(id) { 
    return Promise.cast($.ajax({ 
     url: 'http://example.com/' + id, 
     dataType: 'jsonp', 
    }).done(function(d) { 
     var response = d; 
     console.log(d); 
    }).fail(function() { 
     alert('ERROR'); 
    })); 
} 

Wie Sie sehen können, viel einfacher zu lesen/schreiben.

Answer 2

meisten versprechen Bibliotheken haben diese eingebaut, mit jQuery? Nicht so viel Glück:

Zuerst Ihre Funktion ein Versprechen zurückgeben sollte:

function getData(id) { 
     return $.ajax({ // note the return 
      url: 'http://example.com/'+id, 
      dataType: 'jsonp', 
      success: function (d) { 
       console.log(d); 
      }, 
      error: function() { 
       alert("ERROR") 
      } 
     }); 
} 

Nun Sie verketten sie in einer Schleife mit .then Anrufe. Beachten Sie, dass .then erst ausgeführt wird, nachdem das vorherige Versprechen erfüllt wurde. So werden sie alle hintereinander rennen.

var array = ['One', 'Two', 'Three']; 
var p = $.when(1); // empty promise 
array.forEach(function(el){ 
    p = p.then(function(){ 
     return getData(el);; 
    }); 
}); 

Alle Funktionen werden nacheinander ausgeführt. Was ist übrig? Der Rückgabewert. Die aktuelle Implementierung verwirft den Rückgabewert. Wir können die Rückgabewerte in einem Array zum Beispiel setzen:

var array = ['One', 'Two', 'Three']; 
var p = $.when(1); // empty promise 
var results = []; 
array.forEach(function(el,index){ 
    p = p.then(function(){ 
     return getData(el); 
    }).then(function(data){ 
     results[index] = data; // save the data 
    }); 
}); 
p.then(function(){ 
    // all promises done, results contains the return values 
}); 

Warum obwohl es aufhören, machen wir es schöner machen :) Ihre gesamte Code kann

["One","Two","Three"].map(makeUrl).map($.get).reduce(function(prev,cur,idx){ 
    return prev.then(cur).then(function(data){ results[idx] = data; }); 
},$.when(1)).then(function(){ 
    // results contains all responses here, all requests are sync 
}); 

function makeUrl(id){ 
    return "http://example.com"+id+"?callback=?"; 
}