JavaScript：使用 await 使 asnyc 代码看起来更同步 [重复]

Posted 2023-03-07

【中文标题】JavaScript：使用 await 使 asnyc 代码看起来更同步 [重复]

【英文标题】：JavaScript: Using await to make asnyc code look more synchronous [duplicate]

【发布时间】：2020-10-05 09:23:57

【问题描述】：

我正在尝试了解 asnyc 等待功能。 因此，我想使用一个 asnyc 函数，解决它并执行以下日志随后。

我如何实现这一目标？还是我理解的根本错误？

const test = async function() 
    console.log('hi 1');
    await setTimeout(() => 
        console.log('timout1')
    , 1000);
    console.log('hi 2');
    console.log('hi 3');

test()

结果

hi 1
hi 2
hi 3
timout1

预期结果

hi 1
timout1
hi 2
hi 3

【参考方案1】：

我希望这段代码能帮助你理解异步等待。

function resolveAfter2Seconds() 
  	return new Promise(resolve => 
    	setTimeout(() => 
      		resolve('resolved');
    	, 2000);
  	);


async function asyncCall() 
  	console.log('hi 1');
  	const result = await resolveAfter2Seconds();
  	console.log(result);
  	console.log('hi 2');
  	console.log('hi 3');


asyncCall();

【参考方案2】：

您只能将await 用于promise，而setTimeout 函数不会返回Promise。但是，您可以等待使用 setTimeout 解决的 Promise，这样会给您想要的结果。

因此，函数执行将停止，直到被 awaited 的 Promise 解决或被拒绝，然后继续。

const test = async function() 
  console.log('hi 1');
         // return a new promise resolved after setTimeout callback is fired
  await (new Promise((resolve, reject) => 
    setTimeout(() => 
      console.log('timout1')
      resolve()
    , 1000)
  ))
  console.log('hi 2');
  console.log('hi 3');


test()

希望这会有所帮助！

【讨论】：

啊！你说的对！仅仅因为 setTimeout() 是 asnyc 并不意味着它是一个承诺！