Recently, many students, after learning the cloud development foundation of Stone Brother, always encounter various asynchronous problems in their actual projects.

One, asynchronous problem

The so-called asynchronous: when we request the data of the database, due to the network speed and other reasons, the data return time is uncertain, and we want to use these data, we must wait for the data to return after the success can be used, otherwise it will report an error.

1-1. Problem description

As follows:Many of you would think that if the code is executed from the top down, the request will be executed first, and then line 11 will be executed, and the number of items should be 2. But our line 11 print is 0. Why? The reason for this error is that our use data is not written in the request success. The correct data request is returned asynchronously, we don’t know when the request was successful, but our line 11 code doesn’t wait for our data request to be successful before executing, so line 11 prints 0 instead of 2.

1-2. Solution

To solve the above problem, write the data request success to the place where you used the data.This solves the asynchronous problem, but what if we have a lot of places to use the success data? You can’t write all the code in the success data request. This is where async and await are used to solve the problem.

Use async and await to mutate the step to synchronization

By synchronizing, we keep the code executing from the top down. But as long as there are data requests, there are asynchronous problems. So here we have to figure out how to mutate the step into sync. This is where async and await are used. The code is as follows:As you can see, we don’t have to write the code that uses the data to the request success, so the code reads normally from the top down.

“Await” means to wait for the data request to complete, assign the data return to the res, and then use the data return after the request succeeds.

Matters needing attention

When we use async and await in small programs, they must be paired. Async goes before the function name and await goes before the data request.Also check: enhanced compilationNow that the latest version of the applet developer tool seems to support async and await methods, it seems to be ok to leave the enhanced compilation unchecked. But to be on the safe side, check the check box for enhanced compilation.

Three, go back to hell

For example, we have such a requirement: when users register, to first query whether registered, not registered, can be new registration. After the registration is successful, you can view the list of goods.

3-1 problem description

So let me give you an analysis of the requirementsIf you just look at the flow chart, it will be very simple; But there’s a reality to the link. That is, we have to rely on each process to request success if we want to finally display the product on the page. Now, there are only three requests. What if there are 100 requests? One on top of the other. This is callback hell.

3-2, call back to the hell code

To tell you the truth, you may not realize the harm of going back to hell. So let me implement our requirements above in code. Let’s say we have

  • User table: user
  • Goods

Let’s say we want to register a user named “Little Rock”

Step 1: Check whether you are registered

You can see that the number returned is 0, which means it was not registered

Step 2: Register users

You can see that we can register successfully, but at this point the code is already nested.

Step 3: Search for products

Because our second step, has registered “small rock” success, so we this step registered a “big rock”, registered after the success of the query goods. Look at the code first, and at this point you have three layers nested. The code is getting a little messyLook at the resultsIt can be seen that we have been able to successfully query the commodity data.

I only have three levels of nesting here, so it looks okay, but if I go one more level of nesting. To avoid callback hell, we can also modify the code with async and await.

4. Async combined with await solves callback hell

First take a look at the modified codeAs you can see, the code is much cleaner, and the logic is to execute the code normally from the top down

For the sake of an obvious comparison.We’re done here. Does it feel like using async and await makes your code much cleaner? Just follow this article from Rock Head to find out.