The role of asynchronous JS framework and how to implement it_javascript skills

Let’s start with the importance of asynchronous JS, then introduce the asynchronous js framework, and gain a deeper understanding of asynchronous JS step by step.

1. The importance of asynchronous JS
With the improvement of the status of the Web platform, the JavaScript language that dominates browsers has become one of the most popular languages ​​in the world, and has even entered the field of server programming through Node.js. An important feature of JavaScript is "cannot block", where "cannot" means "should not" rather than "cannot" (as long as a blocking API is provided).

JavaScript is a single-threaded language, so once an API blocks the current thread, it is equivalent to blocking the entire program, so "asynchronous" occupies a very important position in JavaScript programming. The benefits of asynchronous programming on program execution will not be discussed here, but asynchronous programming is very troublesome for developers. It will fragment the program logic and completely lose the semantics.

Have you ever gone crazy because ajax is asynchronous and can only embed logic in callback functions? Code like this looks very bad. If synchronization is used, the code does not need to be nested. But if the request takes too long, the browser will freeze due to thread blocking. It's really distressing. It seems that elegant code and good user experience cannot have both.

2. Asynchronous JS framework debuts
Suppose there are three ajax requests, namely A, B, and C. B can be executed only after A is executed, and C can be executed only after B is executed. In this way, we have to nest, execute B in A's callback function, and then execute C in B's callback function. Such code is very unfriendly.
Based on the principle of "professional wheel building", my asynchronous JS framework is set off!
General structure-　

 var js = new AsyncJs();
      var func = js.Build(function () {
        var a = _$Async({
          url: "",
          success: function () {

          }
        });
        var b = _$Async({
          url: "",
          success: function () {

          }
        });
        var c = _$Async({
          url: "",
          success: function () {

          }
        });
      });
　　　　　　eval(func);

a, b, c will be executed in order, and the thread will not be blocked.

Advantages
1. Good experience. The whole process is asynchronous and the thread will not be blocked.
2. The code is elegant. There is no need for complicated nesting. The framework automatically completes the nesting work for you. You only need to focus on the coding itself, which is easy to maintain.
3. Simple and easy to use. build(function(){ }) You can understand it as C#'s Thread. I will open an extra thread to execute function(){} (JS is single-threaded, this point should be emphasized!)

      new Thread(() =>
      {
        //dosomething
      });

4. Simple and easy to expand. (Please 'wrap' all methods to be executed with _$Async)
5. Easy to debug.
Disadvantages
1.build(function(){ }), the function does not support custom local variables, such as var a=1;
If you want to use local variables, you can only: 　　　

　        var a = _$Async(function () {
          return 1;
        });

2._$Async(); must end with ‘;’.
3. Build(function(){ }) External functions cannot be called directly within the function, such as

　　   function Test() {
      var TestMethod = function () {
        alert(1);
      };
      var func = js.Build(function () {
        TestMethod();
      });
    }

Please use

      function Test() {
      var TestMethod = function () {
        alert(1);
      };
      var func = js.Build(function () {
        _$Async(function () {
          TestMethod();
        });
      });
    }

Maybe you are curious, how is it achieved? Or why not encapsulate eval(r)?

Implementation principleIn fact, it is to analyze the functions in Build, then dynamically combine, nest and execute them. The reason why eval is not encapsulated is that if it is encapsulated, external variables cannot be used, so it must be released.

3. Test code and effects

<head runat="server">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <script src="jquery-1.8.2.min.js"></script>
  <script src="AsyncJavaScript.js"></script>
  <script>
    function Show() {
      var js = new AsyncJs();
      var url = "WebForm1.aspx";
      var func = js.Build(function () {
        _$Async(function () {
          alert("点击后开始第一次ajax请求");
        });
        _$Async({
          url: url,
          data: { val: "第一次ajax请求" },
          success: function (data) {
            alert("第一次请求结束，结果:" + data);
          }
        });
        _$Async(function () {
          alert("点击后开始第二次ajax请求");
        });
        var result = _$Async({
          url: url,
          data: { val: "第二次ajax请求" },
          success: function (data) {
            return data;
          }
        });
        _$Async(function () {
          alert("第二次请求结束，结果:" + result);
        });

      });
      eval(func);
    }
  </script>
</head>
<body>
  <form id="form1" runat="server">
    <div>
      <input type="button" onclick="Show()" value="查询" />
      <input type="text" />
    </div>
  </form>
</body>
</html>

Backend C# code　

 protected void Page_Load(object sender, EventArgs e)
    {
      string val = Request.QueryString["val"];
      if (!string.IsNullOrEmpty(val))
      {
        Thread.Sleep(2000);
        Response.Write(val + "返回结果");
        Response.End();
      }
    }

Rendering:

You can see that the execution is completely sequential and the thread is not blocked.

The above is an introduction to the role and implementation method of the asynchronous JS framework. I hope it will be helpful to everyone's learning and truly understand the importance of asynchronous JS.