Javascript 在Angular和Ionic应用程序中使用async/await的正确方法

我有一个Ionic应用程序，在其中一个页面上，我在用户填写表单后在SQLite DB中插入一些记录。为了确保用户仅在数据插入数据库后才导航到下一页，我使用了async/await特性

但我不确定的是，我是否正确地使用了此功能，因为我的控制台日志中另有说明

在我的控制台日志中，我看到消息******导航到主页，然后执行INSERT USER CONTRACT sql。。。这让我感到困惑，因为导航语句应该是控制台日志中最后一个显示的语句

我已经浏览了这个SO链接和其他一些在线文章，但不确定是否遗漏了什么

控制台日志：

UserContractPage.ts

UserContractProvider.ts实际上在数据库中插入数据

在for循环中，您唯一要等待的就是等待这个。导航；-其他承诺只是宣布，而不是等待。如果希望循环仅在insertUserContract完成后进行，请将wait放在调用前面：

for (let i = 0; i < contractCnt; i++) {
  await this.userContractProvider.insertUserContract(cropId, contracts[i])
    .then((result) => {
      console.log("@@@@@@@result: " + result);
      results.push(result);
    })
    .catch(e => console.error(JSON.stringify(e)));
}

//navigate only when the above code executes and data gets inserted in DB
this.navigate();

还要注意，导航不是异步的，所以不要等待它。

for循环中唯一等待的是等待它。导航；-其他承诺只是宣布，而不是等待。如果希望循环仅在insertUserContract完成后进行，请将wait放在调用前面：

for (let i = 0; i < contractCnt; i++) {
  await this.userContractProvider.insertUserContract(cropId, contracts[i])
    .then((result) => {
      console.log("@@@@@@@result: " + result);
      results.push(result);
    })
    .catch(e => console.error(JSON.stringify(e)));
}

//navigate only when the above code executes and data gets inserted in DB
this.navigate();

---

还请注意，导航不是异步的，所以不要等待它。

尽管这可能对您有效，但正确的方法是使用Promise.all功能，该功能允许您堆叠承诺并等待它们全部完成，然后再继续

在建议的响应中，您一次运行一个insert，这可能就是您试图实现的目标

此外，您正在使用wait with then.catch，这有点过头了

但是，如果要并行运行插入，可以执行以下操作：

async yourFunctionName() {
    const promises = [];
    for (let i = 0; i < contractCnt; i++) {
      promises.push(this.userContractProvider.insertUserContract(cropId, contracts[i]));
    }
    results = await Promise.all(promises);
    // When all the inserts will complete, this navigate() will execute and the 
    //result of each insert is stored in the array results
     this.navigate();
}

---

尽管这可能对您有效，但正确的方法是使用Promise.all功能，该功能允许您堆叠承诺并等待它们全部完成，然后再继续

在建议的响应中，您一次运行一个insert，这可能就是您试图实现的目标

此外，您正在使用wait with then.catch，这有点过头了

但是，如果要并行运行插入，可以执行以下操作：

async yourFunctionName() {
    const promises = [];
    for (let i = 0; i < contractCnt; i++) {
      promises.push(this.userContractProvider.insertUserContract(cropId, contracts[i]));
    }
    results = await Promise.all(promises);
    // When all the inserts will complete, this navigate() will execute and the 
    //result of each insert is stored in the array results
     this.navigate();
}

---

为什么不等待调用this.userContractProvider.insertUserContract？是的，@CertainPerformance也建议了这一点。非常感谢。为什么不等待这个.userContractProvider.insertUserContract的电话呢？是的，@CertainPerformance也建议这样做。非常感谢。无需等待对此的呼叫。导航。删除了此中的等待。导航也无需等待对此的呼叫。导航。删除了此中的等待。导航也

async yourFunctionName() {
    const promises = [];
    for (let i = 0; i < contractCnt; i++) {
      promises.push(this.userContractProvider.insertUserContract(cropId, contracts[i]));
    }
    results = await Promise.all(promises);
    // When all the inserts will complete, this navigate() will execute and the 
    //result of each insert is stored in the array results
     this.navigate();
}