在 javascript 中执行异步方法的传统方式答案

【问题标题】：Traditional way of doing asnyc method in javascript在 javascript 中执行异步方法的传统方式
【发布时间】：2020-11-13 20:37:45
【问题描述】：

我在网上搜索了我们如何创建在 Javascript 中执行 async 函数的传统方式，但它不可用。我在我的程序中实现了promise 函数，但是我用来创建所有自定义样式的软件（tableu）不支持 ES5-ES8 和 async 函数，因为这会引发错误，所以我想知道如果可能的话。

function promise() {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(), 500);
  })
}

async function result() {
  await promise();
}

result().then(render => {
  customStyle()
});

我显示的所有代码都运行良好。我想知道如何将其转换为使用 async 函数的旧方式。这是可能的还是仅在 ES8 中可用？

【问题讨论】：

async/await 只是语法糖。 老式的方式是使用回调，而引入 Promises 和 async/await 的原因仅仅是为了使代码更具可读性。 JavaScript 在我的理解中一直是异步的，并且（在浏览器的上下文中）优先于堆栈中的某些事件和调用。所以你要找的只是回调的概念。见这篇文章：Callback function
您可能希望在运行时运行之前使用 Babel 将代码转换为 es5。或者只是编写您的代码 es5 样式。

标签： javascript promise async-await

【解决方案1】：

回调是执行此操作的非 Promise 或 async/await 方式，基本上是这些事情在幕后工作的方式。

这是一个通过修改你的 sn-p 的简单示例：

function promise(callback) {
    setTimeout(() => callback(), 500);
}

function result() {
    promise(callback);
}

function callback() {
    customStyle();
};

result 不是一个可以在代码中的其他地方等待的异步函数，它还可以接受一个回调参数，例如 promise，当它被调用时你会传递它。该回调函数的实现类似于实际 Promise 的 then。

现在您可以看到为什么 Promise API 和 async/await 对规范进行了如此出色的改进。

【讨论】：

【解决方案2】：

要以传统方式使用 Promise，您必须替换 await 并使用 .then(()=> ...)。我将尝试在此处显示一个 sn-p 以帮助您理解。

您展示的代码不需要 async 或 await，就这样运行良好

function promise() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('resolved')
      resolve()
    }, 500);
  })
}

promise().then(render => {
  customStyle()
});

这里我给你看一个很好用的代码，然后我会转换它：

function callSomeService() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('service whas called')
      resolve({ idOfSomething: 1 })
    }, 2000);
  })
}

function callAnotherServiceUsingTheDataOfThePreviousCall(data) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('service whas called with', data)
      resolve(['potato 1', 'potato 2', 'potato 3'])
    }, 2000);
  })
}

async function result() {
  const serviceResponse = await callSomeService();
  const arrayOfPotatos = await callAnotherServiceUsingTheDataOfThePreviousCall(serviceResponse);
  
  return arrayOfPotatos.map((potato, index) => `${index} - ${potato}`)
}

result().then(arrayOfPotatos => {
  arrayOfPotatos.forEach(potato => console.log(potato))
});

现在我将其转换为不使用 async 或 await，但仍使用 Promise。

function callSomeService() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('service whas called')
      resolve({ idOfSomething: 1 })
    }, 2000)
  })
}

function callAnotherServiceUsingTheDataOfThePreviousCall(data) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('service whas called with', data)
      resolve(['potato 1', 'potato 2', 'potato 3'])
    }, 2000)
  })
}

function result() {
  return callSomeService().then(serviceResponse => {
    return callAnotherServiceUsingTheDataOfThePreviousCall(
      serviceResponse
    ).then(arrayOfPotatos => {
      return arrayOfPotatos.map((potato, index) => `${index} - ${potato}`)
    })
  })
}

result().then(arrayOfPotatos => {
  arrayOfPotatos.forEach(potato => console.log(potato))
})

最后两个代码做同样的事情，但第二个使用 async 和 await 而第三个没有。 Async 和 await 只是使用 Promise 的语法糖。

我希望这会对你有所帮助。

【讨论】：