Detailed explanation of Promise object instances in js

Suppose I now have a real-name verification page that needs to verify the ID number and real name. The real-name authentication is verified by the Ministry of Public Security system (assuming it is verified on the front end). After the verification is passed, I will save the current form information to submit to me Save it in the background;

Method 1 does not require promise

//外层ajax，校验实名信息$.ajax({
   type: "POST",
   url: "公安部检验真实姓名和身份证接口",
   dataType:"json",
   data: {name:"王尼玛",idCardNo:"4405************6543"},
   success: function(msg){
     if(msg.status)
     {        //真实姓名、身份证号码验证通过，提交表单数据到本系统后台
        $.ajax({
           type: "POST",
           url: "/my/info.php", //本系统后台地址
           dataType:"json",
           data: {表单数据},
           success: function(msg){
             if(msg.success)
             {                //保存成功
             }             else
             {                //保存失败
             }
           }
        });
     }     else
     {        //真实姓名、身份证号码错误
     }
   }
});

We can clearly see that the above example requires nested ajax implementation. In actual requirements, any Nested ajax code will be very difficult to read (multiple layers are even more difficult). Of course, some people will use synchronous ajax implementation, but when synchronous ajax requests are made, the user page will feel like it is dead [laughing and crying];

Method 2 uses promise

new Promise(function (resolve, reject) {
           $.ajax({
               type: "POST",
               url: "公安部检验真实姓名和身份证接口",
               dataType: "json",
               data: { name: "王尼玛", idCardNo: "4405************6543" },
               success: function (msg) {
                   if (msg.status) {
                       resolve(msg); //真实姓名、身份证号码通过验证，msg会传入then方法的第一个方法参数
                   }                    else {
                       reject(msg); //真实姓名、身份证号码未通过验证，msg会传入then方法的第二个方法参数
                   }
               }
           });
       }).then(function (resolveMsg) {
           $.ajax({
               type: "POST",
               url: "/my/info.php", //本系统后台地址
               dataType: "json",
               data: { "表单数据": "表单数据" },
               success: function (msg) {
                   if (msg.success) {                        //保存成功
                   }                    else {                        //保存失败
                   }
               }
           });
       }
       , function (rejectMsg) {
           //真实姓名、身份证号码错误
       });

Summary
First let’s talk about the conclusion: Promise is suitable for multi-layer nested asynchronous ajax callbacks;

Obviously, different from the nested ajax of method one, the promise structure of method two is clearer. Especially after multi-layer nesting, the advantages of method two are more obvious. After multi-layer nesting, method one will become It becomes a big mess and is very difficult to understand. Method 2 promise can be used:

new Promise().then()
    .then()
    .then()
    .catch();

format, the structure is very clear;

Related recommendations:
Basic usage of Promise Tutorial

Using Promise to simplify callbacks

Parsing of promise instances in js

The above is the detailed content of Detailed explanation of Promise object instances in js. For more information, please follow other related articles on the PHP Chinese website!