async/await 比回调函数慢

Question

我试图将回调函数转换为async/await，但发现async/await比现有的回调函数慢得多。有哪位能看出我的async/await有什么问题吗？

for (var i = 0; i < balance; i++) {      
  tokenOfOwnerByIndex().call(i).then((id) => {           
      tokenURI().call(id).then((uri) => {
          console.log(uri);
      });
  });         
}

for (var i = 0; i < balance; i++) {
  var id = await this.getTokenOfOwnerByIndex(i);
  var uri = await this.getTokenURI(id);
  console.log(uri);
}

- bbusdriver

---

你正在比较的回调代码是什么？ - Amadan

我在代码中没有看到任何计时机制，你如何验证一个比另一个慢？ - Neverever

你的第一个版本并行调用了tokenOfOwnerByIndex()多次。而你的第二个版本则是串行执行所有操作。 - Paul

你可以像这样修复它：https://jsfiddle.net/m3c4bn7e/ - Paul

Answer 1

在第一个版本中，tokenOfOwnerByIndex 被调用并返回一个 Promise。你可以通过 then 附加回调函数，然后循环继续执行。Promise 最终将被解决，但是在此之前，你的 for 循环已经完成了。

当你使用 await 时，你会阻塞后续代码，直到 Promise 解决。这意味着每次调用 tokenOfOwnerByIndex 都必须解决，然后才能继续 for 循环。

请参考我的代码示例。

function sleep(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

console.time('promise');
let c = 10;
for (let i = 0; i < 10; i++) {
  sleep(100)
    .then(() => {
      c--;
      if (c === 0) {
        console.timeEnd('promise');
      }
    });
}


console.time('await');
(async () => {
  let c = 10;
  for (let i = 0; i < 10; i++) {
    await sleep(100);
    c--;
    if (c === 0) {
      console.timeEnd('await');
    }
  }
})();

- Phillip

---

好的，明白了。那么在这种情况下，我应该坚持使用回调函数吗？ - bbusdriver

或者你可以查看我在JSFiddle上发布的代码，它将等待操作转换为立即调用的异步箭头函数。 - Paul

_ 是一个有效的 Javascript 标识符，实际上是异步箭头函数的参数。如果您不想使用它，可以写成 async () => ...。 - Phillip

谢谢。就性能而言，Paulpro的异步比回调更快吗？ - bbusdriver

你需要自己编写一些性能代码，但我认为最高效的方法是在每个循环迭代中使用 tokenOfOwnerByIndex(i).then(....) 方法。虽然我认为性能差异微乎其微。 - Phillip