In the last article we talked about promises. Of course, in addition to promise objects, ES7 has also introduced a new asynchronous task solution called async await. In this article we will take a look at async await and why it appears.

ES7 new feature async await

Why async await?

We already have Promise solutions for asynchronous tasks, so why do we need async await solutions? The reason for this is very simple: when there are a lot of asynchronous requests in the code, the chained invocation of promises looks less intuitive, and when there are a lot of. Then methods all over the screen, people get confused, and that’s where the async await syntactic candy comes in.

What do ASYNc await need to notice?

  • Async and await are a pair of gay friends, both of whom are indispensable, an evolutionary version of Promise
  • Async and await also serve Promise
  • Async must declare a function, or await will report an error
  • Await is used inside async declared functions

The essence of the async

  • The essence of async is that it declares a function that returns a Promise
Async function(){return (" I am Promise")}() Resolve (" I am Promise") equals (async function () {return promise.resolve (" I am Promise") Promise"); })() so if you want to declare the return value of a function with async, Const asyncFun = async function(){return promise.resolve (" I am) const asyncFun = async function(){return promise.resolve (" I am Promise")} asyncfun. then((result)=>{console.log(result)}) result shows "I am Promise"Copy the code

Await the use of

  • “Await” literally means “wait a little while”, it can provide the ability to wait for an asynchronous return, as long as the asynchronous task declared by “await” has not returned, subsequent programs will not execute

  • An await must be waiting for the return of a Promise object. An await is not waiting if the object to be returned is not a Promise

Const asyncFun = function(){let result = async setTimeout(()=>{console.log(" wait 1 second ")},1000) Console. log(" guess who executes first ") return result} asyncfun. then(result=> {console.log(" output ", result)}Copy the code

SetTimeout is asynchronous but does not wait for it to complete before executing backwards because await must wait for a Promise return to work, which is used when an asynchronous task is called.

The difference between Promise and async await when an asynchronous task calls

Suppose there are now two asyncFunBefore = ()=>{return new Promise((resolve,reject)=>{setTimeout(()=>{resolve(' delay 1 second ')},1000)})} AsyncFunAfter = ()=>{return new Promise((resolve,reject)=>{setTimeout(()=>{resolve(' delay 2 seconds ')},2000)})} Another delay of 2 seconds, another delay of 1 second before output, then the Promise is written as follows: (I'll label the parameters with different numbers, AsyncFunBefore (). Then (result =>{console.log(result) return asyncFunAfter()}). Then (result2 =>{console.log(result) return asyncFunAfter()}). Console. log(result2) return asyncFunBefore()}). Then (result3 =>{console.log(result3) console.log(' done ')}). Catch (error =>{console.log(error)}) {console.log(error)}) =>{console.log(error)})  (async ()=>{ const result = await asyncFunBefore() console.log(result) const result2 = await asyncFunAfter() Console. log(result2) const result3 = await asyncFunBefore() console.log(result3) console.log(' done ')})() If we haven't shown you how to catch an error, we usually use a try catch method, as follows:  (async ()=>{ try{ const result = await asyncFunBefore() console.log(result) const result2 = await asyncFunAfter() Console. log(result2) const result3 = await asyncFunBefore() console.log(result3) console.log(' done ')}catch(e){console.log(result2) const result3 = await asyncFunBefore() console.log(result3) console.log(' done ')}catch(e){ Console. log(e) // here to catch errors}})()Copy the code

You don’t usually have too many try catches in your code, and if there are too many try catches, you might need to refactor your code

Async await the interrupt

  • To be clear, promises cannot be terminated once their state changes
  • The abort here suspends the method and does not cancel the Promise request
  • Simply return a value in the async declared function,null.emptyorfalseIt’s all ok

The code looks like this:

let i = 6 const asyncFun = ()=>{ const result = await asyncFunBefore() console.log(result) const result2 = await AsyncFunAfter () console.log(result2) const result3 = await asyncFunBefore() if(I > 5){return 'exit from here, Log (result3) console.log(' done ')} asyncfun. then(result=> {console.log(result)}). Catch (error=> {console.log(result)}). Console. log(error)}) will output: Resolve (' exit from here, will not be executed later '); resolve(' exit from here, will not be executed later ') Then () so that you can manually terminate the subsequent async code, but only temporarily suspend, not cancel the requestCopy the code