Understand the new syntax of Async/Await in JavaScript

Inspired by the Zeit team blog post, our PayPal team recently migrated the server-side database to Async/Await. I want to share my experience with you.

First of all, let’s understand two terms:

• Async function
• Await keyword

You always talk about Async and Await together, but what you need to know is that they are two different things. What you need to understand about the Async function and the Await keyword is that they are certainly related to some extent, but the Async function can still be used without Await.

Related learning recommendations: javascript video tutorial

##The function will return a Promise

When you create a function using the async keyword, the function will always return a Promise. When you return inside an async function, it wraps your value with a Promise.

 // 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)

}

Async function and its Promise-based Equivalent

In addition to converting your return to a Promise, async functions have a The special thing is that it is the only place where you use the await keyword.

Await allows you to pause the execution of an async function until it receives the result of a promise. This allows you to write async code that appears in the order of execution.

 // 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 allows you to write asynchronous code without the need for callbacks. The advantage of this is that it makes your code more readable. And await is compatible with any promise, not just promises created with async functions.

Handling errors in Async functions

Because the async function is also a Promise, when you put an async function in the code, It will be absorbed and returned as a rejected Promise.

 // 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"))

   }  
    // ...
    }

When you use await to call Promise, you can wrap it with

try/catch, or you need to add a catch handler to the returned Promise.

 // 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

Make good use of the error handling properties of promise and the concise syntax of async functions, which can bring you some powerful capabilities. .

In the simple example below, you will see how I took advantage of the error handling capabilities inherent in async functions, which allowed me to simplify the error handling process in my Express application.

 // 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')

    // ...

}

Previously, we have been using

next(err) to handle errors. However, with async/await, we can place errors anywhere in the code, and then the router will throw these errors to the next function provided by Express, which greatly simplifies error handling process.

I spent several hours migrating the database. To use this method, the only thing you need is a deep understanding of Promise and learning how to set up babel.

The above is the detailed content of Understand the new syntax of Async/Await in JavaScript. For more information, please follow other related articles on the PHP Chinese website!