意外的等待/异步行为

Question

我正在尝试通过等待/异步按顺序/同步顺序执行以下逻辑。

async loadData() {


    console.log("STEP 1");
    let ratesResponse = await getRates();
    let accounts = realm.objects("Account");

    accounts.map(async account => {
      let accountResponse = await getAccountBalance(account.accountid);
      console.log("STEP 2");
      realm.write(() => {
        account.cad_balance = accountResponse.balances[0].value;
        account.usd_balance = (
          parseFloat(accountResponse.balances[0].value) *
          parseFloat(ratesResponse.last)
        ).toString();
      });
    });
    console.log("STEP 3");
    this.setState({
      data: realm.objects("Account"),
      last: ratesResponse.last,
      high: ratesResponse.high,
      low: ratesResponse.low,
      refreshing: false
    });

}

但是，应用功能不起作用，并且日志确认第 3 步发生在第 2 步之前：

2018-02-22 22:53:10.922 [info][tid:com.facebook.react.JavaScript] STEP 1
2018-02-22 22:53:10.921822-0500[13978:3180532] STEP 1
2018-02-22 22:53:11.211 [info][tid:com.facebook.react.JavaScript] STEP 3
2018-02-22 22:53:11.210787-0500[13978:3180532] STEP 3
2018-02-22 22:53:11.233 [info][tid:com.facebook.react.JavaScript] STEP 2
2018-02-22 22:53:11.233529-0500[13978:3180532] STEP 2

我错过了什么？

Answer 1

第一件事 - 你需要等待 accounts.map(async account => {...}) 返回的一系列承诺

这可以使用 await Promise.all 来实现...即 Promise.all(accounts.map(async account => {...}))

其次，如果 realm.write 是异步，您需要等待一个 Promise，该 Promise 在该函数完成时解析

await new Promise(resolve => realm.write(resolve));

所以，把它们放在一起

async function loadData() {
    console.log('STEP 1');
    let ratesResponse = await getRates();
    let accounts = realm.objects('Account');
    await Promise.all(accounts.map(async account => {
        let accountResponse = await getAccountBalance(account.accountid);
        console.log('STEP 2');
        await new Promise(resolve => realm.write(resolve));
        account.cad_balance = accountResponse.balances[0].value;
        account.usd_balance = (parseFloat(accountResponse.balances[0].value) * parseFloat(ratesResponse.last)).toString();
    }));
    console.log('STEP 3');
    this.setState({
        data: realm.objects('Account'),
        last: ratesResponse.last,
        high: ratesResponse.high,
        low: ratesResponse.low,
        refreshing: false
    });
}

Answer 2

Array.prototype.map 不会在提供的函数上等待，因此在提供的函数中对 Array.prototype.map 的等待不会导致您期望的同步行为。

你有两个选择

1. 使用在块中考虑await 的原生for in 运算符，例如

   异步加载数据() {

   console.log("STEP 1");
   let ratesResponse = await getRates();
   let accounts = realm.objects("Account");
   
   for (let account in accounts) {
     let accountResponse = await getAccountBalance(account.accountid);
     console.log("STEP 2");
     realm.write(() => {
       account.cad_balance = accountResponse.balances[0].value;
       account.usd_balance = (
         parseFloat(accountResponse.balances[0].value) *
         parseFloat(ratesResponse.last)
       ).toString();
     });
   }
   console.log("STEP 3");
   this.setState({
     data: realm.objects("Account"),
     last: ratesResponse.last,
     high: ratesResponse.high,
     low: ratesResponse.low,
     refreshing: false
   });
   

   }

2. 或者在异步函数返回的承诺列表上等待

   异步加载数据() {

   console.log("STEP 1");
   let ratesResponse = await getRates();
   let accounts = realm.objects("Account");
   
   await Promise.all(accounts.map(async (account) => {
     let accountResponse = await getAccountBalance(account.accountid);
     console.log("STEP 2");
     realm.write(() => {
       account.cad_balance = accountResponse.balances[0].value;
       account.usd_balance = (
         parseFloat(accountResponse.balances[0].value) *
         parseFloat(ratesResponse.last)
       ).toString();
     });
   });
   console.log("STEP 3");
   this.setState({
     data: realm.objects("Account"),
     last: ratesResponse.last,
     high: ratesResponse.high,
     low: ratesResponse.low,
     refreshing: false
   });
   

   }

但是这两者的运作方式存在细微差别，第一个将逐个处理每个帐户，而第二个将并行处理所有帐户，但要等待并行执行完成才能继续。

Answer 3

accounts.map(async() => ({})) 返回一个 promise 数组。

然后，您需要将该数组传递给 Promise.all() 和 await。

一旦该数组中的所有这些承诺都解决了，它将执行接下来的操作，即您的console.log('STEP 3')。

async function loadData() {
    console.log('STEP 1')
    const ratesResponse = await getRates()
    const accounts = realm.objects('Account')

    const promises = accounts.map(async (account) => {
        const accountResponse = await getAccountBalance(account.accountid)
        console.log('STEP 2')
        realm.write(() => {
            account.cad_balance = accountResponse.balances[0].value
            account.usd_balance = (
                parseFloat(accountResponse.balances[0].value) *
                parseFloat(ratesResponse.last)
            ).toString()
        })
    })

    await Promise.all(promises)

    console.log('STEP 3')
    this.setState({
        data: realm.objects('Account'),
        last: ratesResponse.last,
        high: ratesResponse.high,
        low: ratesResponse.low,
        refreshing: false,
    })
}