Làm thế nào để viết đúng một lời hứa jquery đệ quy

Question

Xin lỗi nếu tôi lặp lại câu hỏi đã được hỏi nhưng mọi thứ tôi đã thấy cho đến nay dường như không đệ quy với tôi, hoặc không ánh xạ với những gì chúng tôi đang làm, và chủ đề của lời hứa và trì hoãn dường như rất phức tạp đối với tôi.

Tôi có "cây chủ đề" được xây dựng không đồng bộ khi người dùng mở rộng các nút. Chủ đề này được xây dựng bằng cách sử dụng một điểm cuối API trả về con của một nút bấm vào nút (+) trên nút cây chủ đề.

Khi người dùng nhấp vào nút Tôi cố gắng một cách đệ quy nạp các yếu tố cây chủ đề sử dụng một phương pháp mà trông như thế này:

function getAssociatedTopics(){ 
    $.get('/topics/curriculum-associations', {guids: [...]}) 
    .then(function(data){ 

     //Process the topic information here 
     var topicId = /* some processing */; 

     //Get ancestors of each topic returned 
     $.get('/topics/getAncestors', {of: topicId}) 
     .then(function(data){ 

      //Process the topic information here 
      var topicId = /* some processing */; 

      //Get ancestors of each topic returned 
      //Rinse repeat as long as we find children of each topic found 


     }); 

    }).then(function(){ 

     //Expand the nodes 
     //Select the nodes 

    }); 
} 

Vì vậy, đây là những gì nó sẽ giống như thế nhưng tôi tất cả mất đọc Các vấn đề lớn chúng ta đang gặp phải bây giờ với cấu trúc này là các nút của tôi tải tất cả theo cách đồng thời và sau đó xóa các nút đã chọn, mở và đóng các nút bất kỳ lúc nào và lựa chọn kết thúc lên siêu lộn xộn.

Tôi không muốn một lời giải thích sâu sắc về những lời hứa, cũng không phải tôi muốn một giải pháp đầy đủ, nhưng một ý tưởng chung làm thế nào để đạt được điều này.

Answer 1

Điều đầu tiên đầu tiên, Tính phức tạp của việc tìm nạp những gì bạn cần phải được xử lý trên máy chủ chứ không phải máy khách. Làm cho hàng trăm yêu cầu HTTP từ máy khách là một thảm họa hiệu suất đang chờ xảy ra.

Bây giờ cho cách bạn muốn làm điều đó, hai sự kiện quan trọng:

• Promises hoạt động bằng cách sử dụng các giá trị trở. $.get trả về lời hứa cho giá trị - đó là lý do tại sao bạn có thể then tắt nó, nhưng bạn cũng có thể trả lại giá trị đó ở bên ngoài.
• Nếu bạn trả lời lời hứa từ trình xử lý then, lời hứa sẽ trả về từ chính số then sẽ chờ lời hứa bên trong giải quyết trước.

Dưới đây là một ví dụ minh hoạ cho hai điểm:

$.get("/api").then(function(data) { 
    return $.get("/api2/" + data.id); 
}).then(function(data2) { 
    // because of point #1, we get the data of the inner call here. 
}); 

Bây giờ, đối với vấn đề thực tế của bạn:

function getAssociatedTopics(guids) { 
    // note the `return` here so it can be chained from outside 
    return $.get('/topics/curriculum-associations', {guids: guids}) 
    .then(function(data){ 
     var topicId = someProcessing(data); 
     // note we return here. I assume this get returns guids. 
     return $.get('/topics/getAncestors', {of: topicId}) 
    }).then(function (guids) { // this anonymous function can be inlined 
     if(guids.length === 0) return; // stop condition 
     return getAssociatedTopics(guids); // note the recursive call, remember point #2. 
    }); 
} 
getAssociatedTopics(initial).then(function(){ 
    // all done 
}); 

Nếu bạn cần kết quả của tất cả các cuộc gọi, bạn có thể chuỗi nó tắt, hoặc bạn có thể đẩy đến một mảng biến đóng bên trong sau đó trước khi cuối cùng và truy cập nó trong xử lý tất cả được thực hiện.