What is an asynchronous operation

In JS, if the current three tasks need to be performed, respectively, A, B, C if according to the order to finish the task, if B is A time-consuming task, then C’s mission is to wait for the results for A long time, so this time it is necessary to put B task queue, to carry out tasks, C B then return the result of some of the I/O, And then you do B, which is asynchronous.

Why do we need asynchronous operations

  • JS execution environment is single thread, what is single thread? For example, if process one wants to delete a demo or element, and process two wants to edit the demo or element, then in a multi-threaded execution environment, if two different processes are executing the same demo, which one should the demo execute? So this is contradictory. This is why the JS execution environment is single threaded.
  • In a single-threaded execution environment, tasks are executed one by one in order. If there is a time-consuming operation, such as a request, then the web page is likely to have no response due to this time-consuming task, and the accumulated tasks behind cannot be executed, which will delay the execution of the whole project

Therefore, asynchronous operations are very important. On the browser side, asynchronous operations should be used to prevent the browser from losing response

Type of asynchronous operation in JS

  • The callback function
  • Event listeners
  • Promise
  • await / async
  • Publish/subscribe
  • The generator (ES6)

The callback function

The callback function is the most basic asynchronous method in JS. If F1,F2 and F3 tasks need to be executed,F2 needs to wait for the results of F1 execution, while F3 is independent. If F1 execution is fast, it can be synchronized. F2 can then be used as a callback to F1 to implement asynchronous operations.

  • Synchronous case
F1()
F2()
F3()
Copy the code
  • The callback function handles the asynchronous case
Function F1 (callback) {setTimeout(function () {console.log(' this is F1's task code ') callback(); }, 1000); } F1(F2) F3()Copy the code

Since F1 is asynchronous and does not know when to complete, it can be used as F1 asynchronous callback function, after F1 asynchronous operation can be immediately executed F2, so that the problem solved

Pay attention to

Function F1 (callback) {console.log(' this is F1's task code ') callback(); } F1(F2) F3()Copy the code

So is F1 an asynchronous operation at this point? This is not true because F1 does not use setTimeout, and the callback passed in is only synchronous, not asynchronous, and simply not a real callback

We can conclude that callbacks are mainly used to solve asynchronous problems

Second, the Promise

Promise is also a way to implement asynchronous programming, the emergence of promise to solve the callback hell, without layers of nested trouble, promise knowledge is still relatively more, here are some features of promise

  • Promise is a constructor that returns an instance of a Promise with new Promise()
  • Promise has two functions resolve(a success callback) and Reject (a failure callback)
  • Promise properTypes have.then and.catch methods, as well as a less-used finally method. That means that the instance you get from new Promise() also has.then() and.catch methods. (The then method, which means that when the task finishes the next step, it can receive two callbacks, a success callback and a failure callback.). Catch is used to catch errors.

Notice that the second argument to the then method and the catch method both catch errors. What’s the difference? The difference is that catch can also catch the first argument of then (resolve), but then cannot, so catch is usually used

Await/async (ES7)

  • Await/async is implemented based on Promise and is non-blocking
  • Async implicitly returns a promise, await the end of a promise, and resolve is returned. If you want to catch an error, you can use a try catch
  • The two need to be used together
  • Equivalent to promises async/await is more concise, avoiding some then nesting

Conclusion: The three commonly used methods of asynchronous programming event listeners are controversial, so I won’t explain them here