Object
There is a great deal of knowledge about async / await.
Used to use async / await but not very sure.
For convenience, use async / await in any case!
There will be many ideas that should be, but in fact this is a trick. If you do not pay attention to understand it will bring ineffective feeling. This article will be a testament to that. However, instead of explaining by using the source code, I will refer to how to make Ramen noodles to be more vivid and easy to visualize. 
Let’s start cooking ramen!
It’s a little sudden, but you will play the role of a noodle shop owner. Your noodle shop has 3 skilled employees who undertake the following areas:
In charge of noodles. In charge of soup In charge of additives (you probably have seen this format somewhere before).
Next, to create Ramen:
- The noodle worker will boil the noodles.
- Soup staff will make soup.
- Personnel in charge of creating additives for grilling pork and slicing thinly. Here are the necessary steps to complete the ramen.
Let’s prepare the API!
Let’s imagine that we have prepared the following APIs:
| End point | End point | Overview |
|---|---|---|
| / noodle | GET | get noodles |
| /soup | GET | get Soup |
| / pork | GET | get PG |
| / ramen | POST | Create Ramen |
Let’s fight！
Too simple, easy as tangent noodles.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | async () => { // Nhân viên phụ trách mỳ sẽ luộc mỳ lên. const noodles = await axios.get('/noodle'); // Nhân viên phụ trách soup sẽ chế soup. const soup = await axios.get('/soup'); // Nhân viên phụ trách tạo phụ gia để nướng thịt lợn và cắt lát mỏng. const pork = await axios.get('/pork'); // Finish Ramen. const ramen = await axios.post('/ramen', { noodles, soup, pork }); return ramen; } |
Ok, looks like it’s going to have ramen soon, but with this method, NG .
A await trap
When using await, processes inside the async function will temporarily pause until the Promise result of the specified function returns the result. So that means ???
await axios.get('/noodle');
Will wait for processes until the result of / noodle ‘ returns. During the test, / soup / pork will not be requested. Means: Wait for the boil to finish. The noodles will start to cook the soup. Wait until the soup is ready to start slicing the meat. Something like that will lose its effectiveness while the shop owner like you have to pay for all 3 employees at the same time！ So wait until finish all then you can imagine the American will ntn and that.
So the solution here is that it is not necessary to wait for each person to finish to proceed to the next stage, you pay the employees so you want to direct all 3 employees at the same time. work together, independent of anyone.
Specifically how to do it？
Translate timing await.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | async () => { // Nhân viên phụ trách mỳ cứ luộc mỳ lên. const noodlesPromise = axios.get('/noodle'); // Nhân viên phụ trách soup cứ chế soup. const soupPromise = axios.get('/soup'); // Nhân viên phụ trách tạo phụ gia cứ nướng thịt lợn và cắt lát mỏng. const porkPromise = axios.get('/pork'); // Wait cả 3 nhân viên hoàn thành công việc. const noodles = await noodlesPromise; const soup = await soupPromise; const pork = await porkPromise; // Finish Ramen const ramen = await axios.post('/ramen', { noodles, soup, pork }); return ramen; } |
Done！ Cup！
Summary
With the above contents, we are having a hot bowl of ramen that will blow and eat on the cold winter days. But don’t forget:
** Need to wait + wait + where to wait + wait at what time, it’s not necessary then don’t wait anymore **