内部循环的AJAX请求:根据前一次调用的响应中止某些ajax调用?

时间:2017-05-18 12:03:18

标签: javascript jquery ajax asynchronous event-loop

我有一系列'项目',其中包含项目所有者ID和项目标题。

我想通过遍历'projects'数组获取每个项目的所有者名称,并使用AJAX进行请求调用,将每个项目的'owner id'传递给某个服务器。

var projects = [
     {owner_id: 1, title: "First project by id one"},
     {owner_id: 2, title: "First project by id two"},
     {owner_id: 1, title: "Second project by id one"},
     {owner_id: 3, title: "First project by id three"}
];

//iterate through the 'projects' array to get the project's owner_id its respective owner_name
var owner_names = {};
projects.forEach(function(project) {
     //check if the id exist in the owner_names key-value pair
     if (project.owner_id in owner_names) {
         //go the next iteration because we already know the owner name
         return;
     }

     //get username by id
     $.ajax({
         url: '//some.com/get/owner_name/by/id/',
         data: project.owner_id
     }.then(function(data) {
         owner_names[data.id] = data.name;
         console.log("First project by " + data.name + " is " +  project.title);
     });


});

当项目迭代是“id one的第二个项目”时,我想中止/不调用ajax函数,因为当迭代是“id by first one”时,我会得到数据。

也就是说,我想输出(假设owner_id 1,2,3,分别是Alice,Bob和Charlie):

First project by Alice is First project by id one 
First project by Bob is First project by id two
First project by Charlie is First project by id three

但相反,我得到了这个

First project by Alice is First project by id one
First project by Bob is First project by id two
First project by Alice is Second project by id one  
First project by Charlie is First project by id three

如何在AJAX中保持异步(不使用“async = false”)的同时实现这一目标?

1 个答案:

答案 0 :(得分:1)

您正在寻找的是Promise.race。但是,要执行您要求的操作,您需要先按所有者ID对数据进行分组,然后将其传递给Promise.race。为每个拥有多个项目的所有者执行此操作。

// Something like...
Promise.all([
  Promise.race([ owner1project1ajax, owner1project2ajax ]),
  owner2project1ajax,
  owner3project1ajax,
])

请注意,虽然$.whenPromise.all的jQuery等价物,但Promise.race没有等效的jQuery。此外,它不会中止其他承诺,但会以先解决/拒绝承诺的价值来解决,而忽略其余的承诺。