The author xiaosan is a full stack engineer who just graduated from the university. The technical article written is basically made up of notes during the learning process. If you like it after reading it, you can give a little praise to my little brother. Exception little brother also has a programmer exchange group, welcome everyone to touch fish. Click add group

The KOA framework’s business process is a fully asynchronous programming model that traverses HTTP upstream and downstream through CTX context objects. The most important thing for us is to understand the Onion model.

Let’s start with a classic onion diagram

Let’s take a look at this code

Use ((CTX, next) => {console.log(" first middleware ", 1); Next () console.log(" first middleware ", 2); }) / / second middleware app. Use ((CTX, next) = > {the console. The log (" the second middleware ", 3); Next () console.log(" Second middleware ", 4); }) / / third middleware app. Use ((CTX, next) = > {the console. The log (" the third middleware ", 5); Console. log(" third middleware ", 6); }) app.listen(3000, () => {console.log("Koa already started at http://loclhost:3000"); })Copy the code

We run this code to open in the browser and go back to the console to look at printing

First middleware 1 second middleware 3 third middleware 5 third middleware 6 second middleware 4 first middleware 2

If you look at this code, the execution effect is 135642, which means that the first middleware wraps the second middleware, the third middleware wraps the second middleware, and when next is called, it goes back to the second middleware, and when it’s done, it continues to execute the first middleware.

So his order would look something like this

I think you get a pretty good idea of that.

Next we will use the syntactic sugar async await. I will briefly introduce async functions here

It is a syntactic sugar for generator functions and can be used with the yield keyword to suspend the execution flow of a function, providing the possibility of changing the execution flow and thus providing a solution for asynchronous programming.

The async function replaces the * of a generator with async and yields with await

To put it simply async/await is an alternative to writing callback functions in asynchronous programming. So much for now. In the next article I will introduce async await functions in more detail.

If an async function is await, it will suspend execution and wait until the async operation is completed and return the parsed value.

Let’s go back to the onion

Then I added an AXIos request to the third middleware. Since it is an asynchronous operation, I have to add an async before the request and an await before the request so that we can get the result of the GET request. Otherwise, it will return a Promise object

The async await function is added here, but…..

Use ((CTX, next) => {console.log(" first middleware ", 1); Next () console.log(" first middleware ", 2); }) / / second middleware app. Use ((CTX, next) = > {the console. The log (" the second middleware ", 3); Next () console.log(" Second middleware ", 4); }) // Third middleware app.use(async(CTX, next) => {console.log(" third middleware ", 5); const axios = require("axios") const res = await axios.get('http://www.baidu.com') console.log(res); Console. log(' sent axios request '); Console. log(" third middleware ", 6); }) app.listen(3000, () => {console.log("Koa already started at http://localhost:3000"); })Copy the code

Let’s print this out ourselves, and you can see that

….

As you can see, although we get back the res result, its printing order is changed, that is, it will suspend execution after it encounters await, and then resume async function execution and return the parsed value after the triggered asynchronous operation is complete.

But that’s not what we want, we want it to be executed in the order it should be executed,

Then to ensure the Onion model, we should make the following changes and add async await to the previous code to control the situation as we expect.

Const Koa = require(' Koa ') const app = new Koa() // async(CTX, next) => {console.log(" first middleware ", 1); Await next() console.log(" first middleware ", 2); }) // Second middleware app.use(async(CTX, next) => {console.log(" second middleware ", 3); Await next() console.log(" second middleware ", 4); }) // Third middleware app.use(async(CTX, next) => {console.log(" third middleware ", 5); Const axios = require("axios") const res = await axios.get('http://www.baidu.com') console.log(' sent axios request '); Console. log(" third middleware ", 6); }) app.listen(3000, () => {console.log("Koa already started at http://loclhost:3000"); })Copy the code

Run the code and we’ll see

Middle omit…

Therefore, when we write middleware functions, we generally change the middleware into async await functions, so that the Onion model will not be uncontrollable or unreasonable due to asynchronous programming

The above is my own understanding, if there is more such as I can not explain, you can leave a message to tell me, I will study hard, we say the problem together to learn from each other, I hope you don’t mean, please big guy