JS Basics-Async

1. Several concepts about Asynchrony

(1) Triggering and execution is not a meaning

The counter's callback function must be triggered after the specified delay, but not necessarily immediately, and may need to wait (waiting for the resource to be freed)

(2) Event queue

The onclick is processed by the browser's kernel DOM binding module and joins the task queue as soon as the event is triggered.

SetTimeout is deferred by the timer module, and its callback is added to the task queue when the time arrives

Ajax is handled by the network module, and the callback is added to the task queue when it is completed.

(3) Settimeout,setinterval

SetTimeout is a delay after a certain time to join the task queue, and setinterval is every certain time after the callback into the task queue, but if there is this callback in the task queue, it will be ignored this time, So setinterval may be in the middle of a situation where there is no execution.

(4) Event loop

JS creates a loop like while, each tick to see if there are events to be processed, and if so, take them out and put them in the main thread.

(5) in ES6, the new task queue, such as (promise) priority, is higher than the task queue priority

2.promise

Previously, for asynchronous processing, we were dealing with callbacks, disassembling callbacks into a function, or using event Publishing/Listening mode to handle more complex asynchrony.

Now ES6 gives a new solution, promise, for IE11 and opera Mini that don't support promise, we use Polyfill to handle, es6-promise

(1) The promise internally implements the resolve and reject callbacks, through which you can modify the state of the Promise object and pass the results of the asynchronous operation through the parameters

New Promise ((resolve,reject) = {   Asyncfun ()   resolve (' End ')  }). Then (data = {   Console.log ( Data)  //end})

(2) frequently used Promise.all () to receive the promise array, sequentially added into the asynchronous queue, and so on after all tasks are completed, the results are mapped in order to result, and the returned array is still

Promise.all ([Promise1,promise2,promise3]). Then (result = = {   Console.log (Result)  //[]})

3.async await

Promise solves our many problems with async, but it still shows redundancy and needs. Then () in the meantime, the anonymous function is used to receive the result, so there is an async function on the promise basis, which is the es2017 standard

(1) Async is used to declare that a function is an asynchronous function, and it always returns promises, regardless of the value inside the function return

Const ASYNCFUN1 = Async () = {  return ' str '  }const asyncFun2 = Async () = {return new Promise (Resolve,rej ECT) = {  SetTimeOut (() = {    resolve (' str ')    },1000     })}

AsyncFun1 internally returns a string that will actually be wrapped into promise.resolve (' str '), ASYNCFUN2 itself is returned with a Promise object

(2) Await operator is used to wait for promise or other value to wait, can only be used within the async function

Async () =>{let data = await new Promise ((resolve,reject) + = {

SetTimeOut (() = {    resolve (' str ')    },1000)     })

Console.log (data)  //STR
}

(3) Multiple asynchronous processing,

Serial processing (after waiting for the previous asynchronous execution, after initiating an asynchronous)

Parallel processing (multiple asynchronous simultaneous initiates, waiting for asynchronous completion)

Const SERIAFN = Async () ={console.time (' Seriafn ') Console.log (await asyncfunction (' Str1 ')) Console.log (await asyncfunction (' STR2 ')) Console.timeend (' Seriafn ')  //serial processing, time consuming about 2000ms    /*equivalent to Asyncfunction (' str1 '). Then (str = = {Console.log (str) return asyncfunction (' str2 ')}). then (str + = Console.log (str)})*/}const Parallel= Async () ={console.time (' Parallel ') Const Parallelone= Asyncfunction (' str1 ') Const Paralleltwo= Asyncfunction (' str2 ') Console.log (await Parallelone) Console.log (await Paralleltwo)//Takes about 1000 milliseconds/*equivalent to const [parallelone,paralleltwo] = await promise.all ([Asyncfunction (' str1 '), asyncfunction (' str2 ')])*//*or Promise.all ([Asyncfunction (), Asyncfunction ()]). then ([result1,result2] = {Console.log (RESULT1,RESULT2)} )*/}

4.async Module

This is a very useful module that provides powerful functions to support asynchronous processing, including more than 20 functional methods such as Async.map (), and Async.waterfall (), such as asynchronous control methods, to view the API

5.async is also a property of the html5<script> tag, which specifies that the script is executed asynchronously