Wozu Entwickler async/await brauchen

async-await-vorteil.md

Besseres Scoping mit async/await

Problem

Wie greife ich auf frühere Ergebnisse in der Promise-Chain zurück?

ajaxCall()
    .then(response => {
      //  ^ man beachte diese Variable
      return expensiveEvaluation(response.data)
    })
    .then(evaluatedData => {
      // wir brauchen aus irgendeinem Grund hier Zugriff auf die `response`,
      // haben wir aber offensichtlich nicht.
    })

Bisherige Lösung

function action () {

  let ajaxResponse // <- definiere Hilfsvariable
  
  return ajaxCall()
    .then(response => {
      ajaxResponse = response // <- `ajaxResponse` ist hier verfügbar
      return expensiveEvaluation(response.data)
    })
    .then(evaluatedData => {
      return {
      	evaluatedData,
        response: ajaxResponse // <- `ajaxResponse` ist hier verfügbar
      }
    })
}

Suboptimal, weil:

• Hilfsvariablen müssen vor der gesamten Promise Chain deklariert werden. Je länger die Chain, desto seltsamer wird das.
• Verständnis beim Lesen: Was ist ajaxResponse? Dank let können wir uns denken, dass es irgendwo gebraucht (weil geändert) wird, müssen aber erst weiterlesen und dann erfassen, dass es eine reine Hilfsvariable ist, um response später in der Chain benutzen zu können.

Lösung mit async/await

async function action () {
  const response = await ajaxCall()
  const evaluatedData = await expensiveEvaluation(response.data)
  
  return {
    response,  // <- `response` ist hier verfügbar
    evaluatedData
  }
}

Vorteil: Es ist

• angenehmer zu schreiben und vor allem
• deutlich einfacher zu lesen und zu verstehen, was hier passiert, da
  • weniger "visual noise" durch die .then(() => {}) Blöcke entsteht.
  • keine zusätzlichen Hilfsvariablen benötigt werden.