javascript - For 循环中的数组项中的 ParseQuery

Question

抱歉，如果我写得不好，我是法国人。

我有一系列这样的项目:

items = [
        {nom: 'xxx', prenom: 'zzz', montant: 500},
        {nom: 'aaa', prenom: 'bbb', montant: 1000},
        {nom: 'ccc', prenom: 'ddd', montant: 1500}
    ];

我想对此数组的每个项目执行 Parse 查询，以从 Parse.com 上存储的数据中检索信息。我这样做了:

for(var x = 0; x < items.length; x++) {           

        query.equalTo("nomTiers", items[x].nom);
        console.log('Loop ' + x);

        query.first({
            success: function (result) {
                nom = result.get('nomTiers');
                prenom = result.get('prenTiers');
                console.log(nom + ' ' + prenom);
                console.log('Entered success');
                lesCollab.push({
                    nom: nom,
                    prenom: prenom
                });
            },
            error: function (error) {
                // if it fails...
            }
        });   
    }

当我在浏览器上查看日志控制台时，我看到了以下内容:

Loop 1
Loop 2
Loop 3
...
Entered success
Entered success
...

这意味着我的应用程序开始启动 for 循环内的代码，但从未启动我的解析查询。它只是在我的 For 循环结束后才执行此操作。因此，我无法正确执行我想要的操作，并且我不明白为什么代码会这样...

如何在每次 for 循环时运行查询？为什么查询在我的 for 之后运行？

Answer 1

事实上，ParseQuery 的 first 方法是异步的，因为它涉及 HTTP 调用。在处理数组的下一个元素之前，您需要等待调用 success 回调。

为此，您需要利用 promise 。在您的情况下，您可以创建一个循环函数，当提供的回调返回的 promise 得到解决时，该函数会调用自身:

const loop = (g) => {
  return new Promise((f, r) => {
    return g().then(v => loop(g)).catch(f);
  });
};

然后您可以使用它来实现异步循环:

var x = 0;
loop(() => {
  return new Promise((resolve, reject) => {
    query.equalTo("nomTiers", items[x].nom);
    query.first(this.items[x], {
      success: (result) => {
        nom = result.get('nomTiers');
        prenom = result.get('prenTiers');
        console.log(nom + ' ' + prenom);
        console.log('Entered success');
        this.lesCollab.push({
          nom: nom,
          prenom: prenom
        });
        x++;
        if (x<this.items.length) {
          resolve();
        }
      }
    });
  });
});

由于 ParseQuery 不符合 Promise，因此需要对 Promise 进行额外的包装。

这是相应的plunkr:https://plnkr.co/edit/r4qb67N0FLoPWOPNbM5w?p=preview 。我使用了可以用 query.first 替换的 fakeQueryFirst。

异步库也可能会让您感兴趣，因为它的 each功能:

async.each(items, (item, cb) => {var x = 0;
  query.equalTo("nomTiers", items[x].nom);
  query.first(this.items[x], {
    success: (result) => {
      nom = result.get('nomTiers');
      prenom = result.get('prenTiers');
      console.log(nom + ' ' + prenom);
      console.log('Entered success');
      this.lesCollab.push({
        nom: nom,
        prenom: prenom
      });
      cb();
    }
  });
});