Conceptual question: What is asynchronous synchronization?
When we are developing requirements and encounter network delays, what usually happens?
For example, we have a page that obtains home page data. Under normal circumstances, users see a screen of product information on the home page.
But due to network delay, when I made a network request to get the data, the server did not give me the message in time.
At this time, loading is often displayed, and then when the server replies to the product information, the product information is updated.
The difference between synchronous and asynchronous is that during loading, the user can do other operations.
Because JS is a single-threaded language, it can only do one thing at the same time. If you use the synchronous method, after you send the request, you will always be stuck and waiting for the server to operate. During this period, the user will not be able to do anything. It can't be done, and even the loading animation may not rotate in circles.
In the asynchronous method, after sending the request, the thread resources are released. When the server responds, the original program will be notified that your request is ready and you can handle the things you originally needed to handle. At this time, the system will put it down. What the current thread needs to do is to render the obtained product information.
To use a simple example, it is:
You go to the store to buy clothes, you tell the clerk which one you want, and the clerk says it is out of stock. Synchronization means that you wait in the store, and when it is available, you take it away. Asynchronous means that the store clerk remembers your phone number, asks you to go home first, and then notifies you when the product is in stock, and you come back to the store to pick it up.
The use of synchronous and asynchronous
After listening to the above descriptions, do you think that synchronization is actually useless, always waiting, and the performance does not seem to be particularly good, but in fact both methods have their own uses in actual development.
Asynchronous is more useful in some states where the state is not that important. It doesn't matter if the data is obtained later.
Synchronization pays more attention to the synchronization of status. For example, the login status of a management system user. Whether the user has successfully logged in after logging in. This result cannot be returned to you later for you to process, because I have to judge your login status before I can decide. Whether you are allowed to enter the system or not, I cannot let you enter the system first to take a look, and then if the verification fails when the results come out, I will ask you to log out. This is unreasonable.
The principle of synchronization and asynchronousness
As mentioned above, the essence of JS is single-threaded. Single-threaded means that I can only do one thing at the same time.
When we execute synchronously by default, tasks A, B, and C on the thread will all be executed in order.
When we use asynchronous execution, if A is a time-consuming task, A will be mounted in a task queue, and BC will be executed next. If BC is also time-consuming, the operation will be repeated.
When the result of A comes out, the main thread is notified that A can be executed and it is no longer time consuming, and then the main thread is allowed to run A.
Code
function func1(){
console.log('fake_请求数据...');
}
function func2(){
console.log('fake_请求请求到了...');
}
//vue 中， 方法后.then代表着，当该方法执行完了之后，执行then里的方法
func1().then(()=>{
func2()
});
//fake_请求数据...
//fake_请求请求到了...
In the above example, if func1 is executed, the method in then will be executed. The method in then is called the callback function. This is asynchronous execution.
If it is executed in sequence normally, it is executed synchronously.
func1();
func2();
async / await
async / await is a syntactic sugar, it can replace the function of then(), and it is easy to write.
async is used to modify methods that require await, usually placed in front of the method name:
async fun3(){
const a = await console.log('测试await');
}
In the above example of requesting data, we can write it using async/await method:
async function func1(){
await console.log('fake_请求数据...');
console.log('fake_请求请求到了...');
}
func1();
Why is it written like this? Because the method following await is asynchronous, that is to say, nothing following await will occupy the thread, but the subsequent code will still wait for the sentence await, so the sentence requesting data will not block , but the request will be printed after the data is requested. This has the same effect as the usage of then above.