Promise 解决 jquery ajax 验证回调嵌套的问题

最新推荐文章于 2022-01-22 23:18:45 发布

TinybicXL

最新推荐文章于 2022-01-22 23:18:45 发布

阅读量844

点赞数

分类专栏： JS 文章标签： ES6 JS 前端 ajax Promise

本文链接：https://blog.csdn.net/weixin_37704579/article/details/84654332

版权

本文探讨了在前端验证用户输入时遇到的回调嵌套问题，特别是当需要调用后台接口验证时。文章提出使用ES6的Promise特性来解决这一问题，详细解释了Promise的工作原理，并介绍了如何通过Promise.all确保所有验证通过后再执行提交操作。最后，推荐了阮一峰的《ECMAScript 6 入门》作为Promise的深入学习资料。

摘要由CSDN通过智能技术生成

作为前端，需要经常验证用户输入和表单提交，一般像验证姓名，手机号，邮箱，身份证号等都在前端用正则匹配来验证就够了，传到后台以后后台可以再验证一次，但是最近项目要求统一调用后台接口进行验证。那么问题来了，如果只是在前端正则验证，那只需要判断每个输入的验证均为true，然后提交表单即可，如下：

if( validateMob() && validateId && validateMail()...){
            submitForm();
        }

但是现在要调后台接口进行验证，那就会出现下面情况，因为是异步操作，所以不确定谁会先验证返回结果，所以在验证每一项的时候都要判断所有的返回结果是不是都是true，如果都是true，再进行提交操作

//创建变量记录各项的验证状态
var mob_status = false,
            id_status = false,
            mail_status = false;
        
        function validateMob() {
            $.ajax({
                url:"",
                data:"",
                success: function (ret) {
                    if(ret){
                        mob_status = true;
                        if( mob_status && id_status && mail_status){
                            submitForm();
                        }
                    }
                }
            })
        }
        function validateId() {
            $.ajax({
                url:"",
                data:"",