javascript - js中，如何将异步操作变为同步？

Question

经常看到的一个题目，特此求解
gpt的写法是：

1. async/await
2. callback function

Answer 1

如果题主意思是让异步代码有类似同步的样子

一般也就是那两三种

• async

  function asyncFunction() {  return new Promise((resolve, reject) => {    // 模拟异步操作    setTimeout(() => {      const result = 'Hello, world!';      resolve(result);    }, 1000);  });}// 调用测试(async function() {  console.log('Start');  const result = await asyncFunction();  console.log('End');})();

• 回调函数

  function asyncFunction(callback) {  // 模拟异步操作  setTimeout(() => {  const result = 'Hello, world!';  callback(result);  }, 1000);}// 调用测试(function syncFunction() {  console.log('Start');  asyncFunction(function(result) {  console.log(result);  console.log('End');  });})();

• Generator生成器

  function asyncFunction() {  return new Promise((resolve, reject) => {    // 异步操作    setTimeout(() => {      const result = 'Hello, world!';      resolve(result);    }, 1000);  });}// 将异步操作封装在生成器中（不大推荐，不如上面两种简洁明了）function* syncFunction() {  console.log('Start');  const result = yield asyncFunction();  console.log(result);  console.log('End');}// 执行生成器函数（手动迭代）const generator = syncFunction();function handleAsync(iterator) {  const { value, done } = iterator.next();  if (done) return;  if (value instanceof Promise) {    value.then((result) => {      handleAsync(iterator);    }).catch((error) => {      console.error(error);    });  }}handleAsync(generator);

• 借助第三方框架，例如：

  • synchronize.js
  • fibers.js
  • （不推荐）可能导致性能下降和代码可读性降低

如果题主的意思是把异步代码改造为同步

那就要把所有会触发异步的代码移除或修改（正常不会有这样丧心病狂的需求吧）

例如：

• 定时器函数
• 监听事件处理
• async 函数和 Promise 对象
• ...

第三方框架链接
synchronize
fibers

Answer 2

严格来说异步没有办法变为同步。更多时候提问者应该是想说让代码写起来像同步。那么这样其实就只有一种那就是async/await；因为其他的方式都不太像同步。宽泛点问应该是怎么设计一个异步逻辑。那就有很多种了。
1、回调函数
2、promise
3、队列。其实promise也是队列
4、promise+generator => async/await