Callbacks, Promises and Async/Await

本文转自作者Sandeep Dinesh的文章：Callbacks, Promises and Async/Await

假设你有一个函数可以在一段随机的时间后打印一个字符串：

function printString(string){
  setTimeout(
    () => {
      console.log(string)
    }, 
    Math.floor(Math.random() * 100) + 1
  )
}

让我们尝试按顺序打印字母A，B，C：

function printAll(){
  printString("A")
  printString("B")
  printString("C")
}
printAll()

每次调用printAll时，您会注意到A，B和C以不同的随机顺序打印！

这是因为这些函数是异步的。每个函数按顺序执行，但每个函数都独立于它自己的setTimeout。在开始之前，他们不会等待最后一个功能完成。

这非常烦人，所以让我们用回调修复它。

Callbacks

回调是传递给另一个函数的函数。第一个函数完成后，它将运行第二个函数。

function printString(string, callback){
  setTimeout(
    () => {
      console.log(string)
      callback()
    }, 
    Math.floor(Math.random() * 100) + 1
  )
}

你可以看到，修改原始函数是非常容易的，可以使用回调。

再次，让我们尝试按顺序打印字母A，B，C：

function printAll(){
  printString("A", () => {
    printString("B", () => {
      printString("C", () => {})
    })
  })
}
printAll()

嗯，代码现在很丑陋，但至少它有效！每次调用printAll时，都会得到相同的结果。

回调的问题是它创建了一个名为“Callback Hell”的东西。基本上，你开始在函数内的函数内嵌套函数，并且开始变得非常难以阅读代码。

Promise

Promise尝试修复这个嵌套问题。让我们改变我们的功能来使用Promises

function printString(string){
  return new Promise((resolve, reject) => {
    setTimeout(
      () => {
       console.log(string)
       resolve()
      }, 
     Math.floor(Math.random() * 100) + 1
    )
  })
}

你可以看到它看起来仍然非常相似。您将整个函数包装在Promise中，而不是调用回调，而是调用resolve（如果出现错误则拒绝）。该函数返回此Promise对象。

再次，让我们尝试按顺序打印字母A，B，C：

function printAll(){
  printString("A")
  .then(() => {
    return printString("B")
  })
  .then(() => {
    return printString("C")
  })
}
printAll()

这被称为承诺链。您可以看到代码返回函数的结果（将是Promise），并将其发送到链中的下一个函数。

代码不再嵌套，但看起来仍然很混乱！

通过使用箭头函数的功能，我们可以删除“包装器”功能。代码变得更清晰，但仍然有很多不必要的括号：

function printAll(){
  printString("A")
  .then(() => printString("B"))
  .then(() => printString("C"))
}
printAll()

Await

Await基本上是Promises的语法糖。它使您的异步代码看起来更像是同步/过程代码，人类更容易理解。

该PRINTSTRING功能不自许的版本在所有改变。

再次，让我们尝试按顺序打印字母A，B，C：

async function printAll(){
  await printString("A")
  await printString("B")
  await printString("C")
}
printAll()

是啊...。好多了！

您可能会注意到我们对包装函数printAll使用“async”关键字。这让我们的JavaScript知道我们正在使用async / await语法，如果你想使用Await，这是必要的。这意味着你不能在全球范围内使用Await; 它总是需要一个包装函数。大多数JavaScript代码都在函数内部运行，因此这不是什么大问题。

等等，这里还有更多哦

该PRINTSTRING函数不返回任何东西，是独立的，所有我们关心的是顺序。但是，如果您想获取第一个函数的输出，在第二个函数中执行某些操作，然后将其传递给第三个函数，该怎么办？

我们不是每次都打印字符串，而是创建一个连接字符串并传递它的函数。

Callbacks

这里是回调样式：

function addString(previous, current, callback){
  setTimeout(
    () => {
      callback((previous + ' ' + current))
    }, 
    Math.floor(Math.random() * 100) + 1
  )
}

为了使用它：

function addAll(){
  addString('', 'A', result => {
    addString(result, 'B', result => {
      addString(result, 'C', result => {
       console.log(result) // Prints out " A B C"
      })
    })
  })
}
addAll()

不太好。

Promises

这是Promise风格：

function addString(previous, current){
  return new Promise((resolve, reject) => {
    setTimeout(
      () => {
        resolve(previous + ' ' + current)
      }, 
      Math.floor(Math.random() * 100) + 1
    )
  })
}

为了使用它：

function addAll(){  
  addString('', 'A')
  .then(result => {
    return addString(result, 'B')
  })
  .then(result => {
    return addString(result, 'C')
  })
  .then(result => {
    console.log(result) // Prints out " A B C"
  })
}
addAll()

使用箭头函数意味着我们可以使代码更好一些：

function addAll(){  
  addString('', 'A')
  .then(result => addString(result, 'B'))
  .then(result => addString(result, 'C'))
  .then(result => {
    console.log(result) // Prints out " A B C"
  })
}
addAll()

这肯定更具可读性，特别是如果你向链添加更多，但仍然是一堆括号。

Await

该功能与Promise版本保持一致。

并且为了使用它：

async function addAll(){
  let toPrint = ''
  toPrint = await addString(toPrint, 'A')
  toPrint = await addString(toPrint, 'B')
  toPrint = await addString(toPrint, 'C')
  console.log(toPrint) // Prints out " A B C"
}
addAll()

Yeah. SO MUCH BETTER～