jQuery 지연 및 약속 루프를 사용하여

Question

이것은 달성하려고하는 것입니다.

나는 각각 jQuery에 전달하는 정렬 된 배열을 가지고 있습니다. 각각의 내부에는 원하는 데이터를 가져올 때마다 다른 배열로 푸시 할 아약스 호출이 있습니다 (allJsonData라고 부름). 마지막으로 나는 allJsonData를 표시합니다. 문제는 내가 allJsonData를 표시 할 때마다 요소가 항상 일관성없이 (알파벳순/임의의 순서가 아닌) 표시된다는 것입니다. allJsonData가 사전 순으로 표시되기를 기대하고 있습니다 (AList 데이터를 먼저, BList 데이터를 두 번째로, CList 데이터를 세 번째 등). jQuery를 처음 사용하고 약속했습니다. 미리 감사드립니다.

var sortedArray = [AList, BList, CList, DList]; 

Promise.all(sortedArray.map(function(value) { 
    var url = ...; 
    return getListItems(url); 
})).then(function(results) { 
    // results is an array of results from AList, BList, CList, DList in order 
    let allJsonData = []; 
    results.forEach(function(approvedListItems) { 
     allJsonData.push.apply(allJsonData, approvedListItems.d.results); 
    }); 
    // process allJsonData here 
}); 

// simplify getListItems like this 
getListItems: function(url) {  
    return $.ajax({ 
     url: url, 
     type: "GET", 
     headers: { 
      "accept": "application/json;odata=verbose", 
     } 
    }); 
}, 

여기에 일반적인 생각이다 :

var sortedArray = [AList, BList, CList, DList]; 
var promises = []; 
var allJsonData = []; 
$.each(sortedArray, function (index, value) { 
var dfd = $.Deferred(); 
var url = _spPageContextInfo.webAbsoluteUrl + ('/_api/Web/Lists/GetByTitle(' + "'" + value + "'" + ')/Items? + "SomeFilterParameters"; 

//AJAX CALL HERE// 
.done(
    function (approvedListItems) { 
    if (approvedListItems.d.results.length != 0) { 
     $.each(approvedListItems.d.results, function (i, col) { 
     allJsonData.push(col);//Push into master array 
     }); 
    }//If closed 
    dfd.resolve(allJsonData); 
    } 
);//Done closed 
    promises.push(dfd); 
});//jQuery Each closed 
return $.when.apply($, promises).promise(); 

/**** AJAX의 CALL ****/

getListItems: function(url) {  
    var dfd = $.Deferred(); 
    $.ajax({ 
     url: url, 
     type: "GET", 
     headers: { 
     "accept": "application/json;odata=verbose", 
     }, 
    success: function (data) { 
     dfd.resolve(data); 
    }, 
    error: function (error) { 
     dfd.reject(sender, args, "Error retrieving items"); 
    } 
    }); 
    return dfd.promise();   
}, 

Answer 1

나는이 같은 간단한을 할 수 있다고 생각 sortedArray의 각 항목에 대해 원시 목록 (내부의 하위 결과는 처리하지 않음)을 얻습니다. Promise.all() 또는 $.when()을 사용하면 원시 목록이 순서대로 표시됩니다. 그런 다음 모든 원시 목록을 얻은 후에 순서대로 처리하고 allJsonData 구조를 순서대로 빌드 할 수 있습니다.

또한 약속 방지 패턴을 getListItems()에서 제거 할 수 있습니다. $.ajax()은 이미 약속을 반환하므로 다른 약속으로 포장 할 필요가 없습니다.

실제로 이것을 원한다면 Promise.all() 대신 $.when()을 사용하도록 변환 할 수 있지만, 인수를 취하고 결과를 반환하기 때문에 $.when()을 사용하는 것이 더 복잡합니다.

또한 url 변수에 Javascript 문자열 구문에 문제가 있습니다. 나는 네가 네가 의도 한 바를 모른다. 그래서 나는 무엇을 제안해야할지 모르겠다. 그러나 너는 그것을 고칠 필요가있다.