Verstehen Sie die neue Syntax von Async/Await in JavaScript

Inspiriert durch den Zeit Team-Blogbeitrag hat unser PayPal-Team kürzlich die serverseitige Datenbank auf Async/Await migriert. Ich möchte meine Erfahrungen mit Ihnen teilen.

Lassen Sie uns zunächst zwei Begriffe verstehen:

• Async-Funktion
• Warten auf Schlüsselwort

Man redet immer gemeinsam über Async und Await, aber man muss wissen, dass es sich um zwei verschiedene Dinge handelt. Was Sie über die Async-Funktion und das Schlüsselwort Await verstehen müssen, ist, dass sie sicherlich in gewissem Maße miteinander verwandt sind, die Async-Funktion jedoch dennoch ohne Await verwendet werden kann.

Verwandte Lernempfehlungen: Javascript-Video-Tutorial

Die Funktion gibt ein Versprechen zurück

Wenn Sie eine Funktion mit dem Schlüsselwort async erstellen, gibt die Funktion immer ein Promise zurück. Wenn Sie in eine asynchrone Funktion zurückkehren, wird Ihr Wert mit einem Versprechen umschlossen.

 // here is an async function
 async function getNumber() {

  return 4 // actually returns a Promise
  }
  // the same function using promises
  function getNumber() {

     return Promise.resolve(4)

}

Asynchrone Funktion und ihr auf Versprechen basierendes Äquivalent

Zusätzlich zur Umwandlung Ihrer Rückgabe in ein Versprechen verfügen asynchrone Funktionen über eine Besonderheit dass dies der einzige Ort ist, an dem Sie das Schlüsselwort „await“ verwenden können.

Await ermöglicht es Ihnen, die Ausführung einer asynchronen Funktion anzuhalten, bis sie das Ergebnis eines Versprechens erhält. Dadurch können Sie asynchronen Code schreiben, der in der Reihenfolge der Ausführung angezeigt wird.

 // async function to show user data
 async function displayUserData() {

    let me = await fetch('/users/me')

    console.log(me)

}// promise-based equivalent
function displayUserData() {

    return fetch('/users/me').then(function(me) {

        console.log(me)

    })

})

Await ermöglicht es Ihnen, asynchronen Code zu schreiben, ohne dass Rückrufe erforderlich sind. Dies hat den Vorteil, dass Ihr Code dadurch besser lesbar wird. Und „await“ ist mit jedem Versprechen kompatibel, nicht nur mit Versprechen, die mit asynchronen Funktionen erstellt wurden.

Umgang mit Fehlern in asynchronen Funktionen

Da die asynchrone Funktion auch ein Versprechen ist, wird dies der Fall sein, wenn Sie eine asynchrone Funktion in den Code einfügen absorbiert und als abgelehntes Versprechen zurückgegeben werden.

 // basic error handling with async functions
 async function getData(param) {

   if (isBad(param)) {     
    throw new Error("this is a bad param")

   }   
   // ...
   }
   // basic promise-based error handling example
   function getData(param) {

   if (isBad(param)) {      
   return Promise.reject(new Error("this is a bad param"))

   }  
    // ...
    }

Wenn Sie „await“ verwenden, um Promise aufzurufen, können Sie es mit try/catch umschließen, oder Sie müssen dem zurückgegebenen Promise einen Catch-Handler hinzufügen.

 // rely on try/catch around the awaited Promise

async function doSomething() {   
 try {       
  let data = await getData()

    } catch (err) {       
     console.error(err)

    }

}
// add a catch handlerfunction doSomething() {    
return getData().catch(err => {      
  console.error(err)

    })

}

Integration

Die Verwendung der Fehlerbehandlungseigenschaften von Promise und der prägnanten Syntax asynchroner Funktionen kann Ihnen einige leistungsstarke Funktionen bieten.

Im folgenden einfachen Beispiel sehen Sie, wie ich die Fehlerbehandlungsfunktionen asynchroner Funktionen genutzt habe, die es mir ermöglichten, den Fehlerbehandlungsprozess in meiner Express-Anwendung zu vereinfachen.

 // catch any errors in the promise and either forward them to next(err) or ignore them
 const catchErrors = fn => (req, res, next) => fn(req, res, next).catch(next)
 const ignoreErrors = fn => (req, res, next) => fn(req, res, next).catch(() => next())
 // wrap my routes in those helpers functions to get error handling
 app.get('/sendMoney/:amount', catchErrors(sendMoney))
 // use our ignoreErrors helper to ignore any errors in the logging middleware
 app.get('/doSomethingElse', ignoreErrors(logSomething), doSomethingElse)
 // controller method can throw errors knowing router will pick it up
 export async function sendMoney(req, res, next) {  
 if (!req.param.amount) {     
 throw new Error('You need to provide an amount!')  

  }  await Money.sendPayment(amount) // no try/catch needed

  res.send(`You just sent ${amount}`)}

// basic async logging middleware
export async function logSomething(req, res, next) {

    // ...    
    throw new Error('Something went wrong with your logging')

    // ...

}

Zuvor haben wir next(err) zur Fehlerbehandlung verwendet. Mit async/await können wir jedoch Fehler an einer beliebigen Stelle im Code platzieren, und der Router leitet diese Fehler dann an die nächste von Express bereitgestellte Funktion weiter, was den Fehlerbehandlungsprozess erheblich vereinfacht.

Ich habe mehrere Stunden damit verbracht, die Datenbank zu migrieren. Um diese Methode verwenden zu können, benötigen Sie lediglich ein tiefes Verständnis von Promise und das Erlernen der Einrichtung von Babel.

Das obige ist der detaillierte Inhalt vonVerstehen Sie die neue Syntax von Async/Await in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!