>  기사  >  웹 프론트엔드  >  js의 Promise 객체 인스턴스에 대한 자세한 설명

js의 Promise 객체 인스턴스에 대한 자세한 설명

小云云
小云云원래의
2018-03-06 14:02:212365검색

이제 ID 번호와 실명을 확인해야 하는 실명 확인 페이지가 있다고 가정해 보겠습니다. 실명 확인은 공안부 시스템에서 확인됩니다(확인 후 확인된다고 가정). 전달되면 현재 양식 정보를 저장하고 내 백엔드에 제출합니다.

Promise를 사용하지 않는 방법 1

//外层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
     {        //真实姓名、身份证号码错误
     }
   }
});

위 예제에는 실제 요구 사항에서 중첩된 Ajax 구현이 필요하다는 것을 분명히 알 수 있습니다. 중첩된 Ajax 코드는 읽기가 매우 어렵습니다(다중 레이어는 Force가 훨씬 더 고통스럽습니다). 물론 일부 사람들은 동기식 Ajax 구현을 사용하지만 Ajax 요청을 동기화할 때 사용자에게 페이지가 죽은 것 같은 느낌을 줄 것입니다. 웃고 울다];

방법 2는 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) {
            //真实姓名、身份证号码错误
        });

요약
첫 번째 결론: Promise는 다중 계층 중첩 비동기 Ajax 콜백에 적합합니다.

분명히 방법 1의 중첩된 Ajax와는 다릅니다. 방법 2의 구조는 더 명확합니다. 특히 다중 레이어 중첩 후에는 방법 2의 장점이 있습니다. 다중 레이어 중첩 후에는 방법 1이 큰 혼란을 겪게 되어 방법 2의 약속을 이해하기가 매우 어렵다는 것이 훨씬 더 분명해졌습니다. 사용:

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

형식, 구조는 매우 명확합니다.

관련 권장 사항:
Promise 튜토리얼의 기본 사용법

Promise를 사용하여 콜백 단순화

js에서 Promise 인스턴스 구문 분석

위 내용은 js의 Promise 객체 인스턴스에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.