javascript async await 我不明白它是如何工作的

Question

您好，我正在更深入地研究 Javascript async/await 并且我有一些我不理解的代码。

在这段代码中，我首先将一个数组 [1,2,3,4] 发送给一个名为 timeCall 的函数，然后再次使用 [5,6,7,8] 发送它。所以，我期望代码的工作方式是

1 2 3 4
h e l l o
5 6 7 8
h e l l o

你好，为什么

1 5
h e l l o
2 6
h e l l o

不知道是不是这样处理的。如果我用 map 而不是 for of 语句，1 到 8 完成后，hello 会重复出现。我想现在，当我遇到 await 时，我转到微任务并发送下面的 5 6 7 8。我觉得没有什么问题

1 2 3 4 你好 5 6 7 8 ....

如何修改代码输出这样的数据？

const timeArrs = [
  'h',
  'e',
  'l',
  'l',
  'o'
]

function time(arr) {
  return new Promise((res, rej) => {
    setTimeout(() => {
      res(console.log(arr));
    }, 3000);
  })
}

function timeArrProcessing(arr) {
  return new Promise((res, rej) => {
    setTimeout(() => {
      res(console.log(arr));
    }, 2000);
  })
}

function hi() {
  return Promise.all(timeArrs.map(async(arr) => {
    await timeArrProcessing(arr);
  }));
}

async function timeCall(arrs) {
  for(const arr of arrs) {
    await time(arr);
    await hi();
  }
  console.log('End');
}

timeCall([1, 2, 3, 4]);
timeCall([5, 6, 7, 8]);

Answer 1

如评论中所述，您的代码中存在一些问题...首先，仅调用异步函数将立即启动它运行ning 'in the background' 而它不会阻止其他代码，所以这些行只是启动两个 timeCall 实例，它们将同时运行

timeCall([1, 2, 3, 4]);
timeCall([5, 6, 7, 8]);

如果您希望第一个在运行第二个之前完成，您需要等待它。但是由于 await 仅适用于异步函数，因此您可能需要 async iife 到运行它们

(async()=>{
  await timeCall([1, 2, 3, 4]);
  await timeCall([5, 6, 7, 8]);
})()

您还在每个元素完成后添加了 hi 函数，而不是在它们全部完成后添加，因此您可能希望将 timeCall 更改为：

async function timeCall(arr) {
  for(const elem of arr) {
    await time(elem);
  }
  await hi();
}

此外 - 看起来您可能希望打招呼在 'hello' 中的字母之间暂停？如果是这样，您将需要这样的东西：

async function hi() {
  for(const elem of timeArrs) {
    await timeArrProcessing(elem);
  }
}

因此，将所有这些放在一起，请尝试以下操作，看看它是否适合您：

const timeArrs = [
  'h',
  'e',
  'l',
  'l',
  'o'
];

(async()=>{
  await timeCall([1, 2, 3, 4]);
  await timeCall([5, 6, 7, 8]);
  console.log('End');
})()

async function timeCall(arr) {
  for(const elem of arr) {
    await time(elem);
  }
  await hi();
}

function time(elem) {
  return new Promise((res, rej) => {
    setTimeout(() => {
      res(console.log(elem));
    }, 3000);
  })
}

function timeArrProcessing(arr) {
  return new Promise((res, rej) => {
    setTimeout(() => {
      res(console.log(arr));
    }, 2000);
  })
}

async function hi() {
  for(const elem of timeArrs) {
    await timeArrProcessing(elem);
  }
}

javascript async await 我不明白它是如何工作的

javascript async await I don't understand how it works

javascript

async-await

es6-promise