js异常：关于ajax是否为独立线程的猜想

Dear 丶 2022-10-21 11:51 65阅读 0赞

## 1、楔子 ##

最近在写一个练手项目，有一个功能就是设置勾选按钮7天内自动登录，当时我的想法就是直接将数据存入到cookie之中。我的思路如下（附上参考图）：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ3OTUzODU1_size_16_color_FFFFFF_t_70]  
当用户第一次登录，勾选7天自动登录，点击登录时，发送一个请求，由servlet接收到之后去数据库查找对应的用户信息，如果该用户存在，返回其信息的json形式。ajax以回调的形式接收，并将其存入cookie中；当用户第二次登录时，会直接从cookie中取出数据进行登录，代码如下：

//邮箱正则表达式
    var myreg = null;
    //cookie对象
    var cookies = null;
    //判断是否需要将用户信息存入cookie
    var flag = false;
    
    $(function(){ 
        //初始化获取对象
        $email = $(".email");
        $alertInfo = $(".alertInfo");
        $password = $(".password");
        $submit = $(".submit");
    
        cookies = document.cookie;
    
        console.log($(".is7day").attr("checked")=="checked");
        //如果选中了才会进行获取cookie信息，后续如果没有cookie信息则会设置存取cookie的标志为true，后续就绪存入cookie了
        if($(".is7day").attr("checked")=="checked") { 
            getCookie();
        }
    
        //正则表达式验证邮箱
        myreg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
    
        //因为当它获取cookie中的数据自动提交的时候，总是最后才执行ajax的请求，导致无法获取到当前的用户
        //信息，所以暂且在外面的加载事件中也请求一次，避免空对象异常
        $.ajax({ 
            url: "isEmail",
            data: { method: "isEmailExist", email: $email.val()},
            type: "GET",
            dataType: "json",
            success: function (data) { 
                //将之前的对象抛出，避免每次请求都添加一个对象，导致数据重复冗余
                user.pop();
                //放入一个对象
                user.push(data);
                alert("正在登录")
            },
            error: function () { 
            }
        });
        console.log(user)
        //提交事件
        $submit.click(function () { 
            //每次的输入都不同，所以每次点击都应该请求一次
            // 请求获取当前用户信息
            $.ajax({ 
                url: "isEmail",
                data: { method: "isEmailExist", email: $email.val()},
                type: "GET",
                dataType: "json",
                success: function (data) { 
                    //将之前的对象抛出，避免每次请求都添加一个对象，导致数据重复冗余
                    user.pop();
                    //放入一个对象
                    user.push(data);
                    console.log(user[0].email);
                },
                error: function () { 
                }
            });
    
            //邮箱不为空：若为空，return false阻止请求同时结束方法。
            if($email.val()==null || $email.val()==""){ 
                $alertInfo.html("邮箱不能为空！");
                return false;
            }else{ 
                $alertInfo.html("");
            }
    
            //邮箱格式验证：
            if(!myreg.test($email.val())) { 
                $alertInfo.html("请输入正确的邮箱！");
                return false;
            }else{ 
                $alertInfo.html("");
            }
    
            //密码不为空：
            if($password.val()==null || $password.val()==""){ 
                $alertInfo.html("密码不能为空！");
                return false;
            }else{ 
                $alertInfo.html("");
            }
    
            console.log(user[0].email);
            //邮箱不存在
            if(user[0].email!=$email.val()){ 
                $alertInfo.html("邮箱不存在");
                return false;
            }else if(user[0].password!=$password.val()){ 
                $alertInfo.html("密码错误");
                return false;
            }else{ 
                $alertInfo.html("");
                if (flag){ 
                    setCookie();
                }
            }
    
            //设置cookie数据
            if (flag){ 
                setCookie();
            }
    
            // setTimeout(function () { 
            // 
            // },1000);
        });
    });
    
    //获取cookie数据
    function getCookie(){ 
    
        if(cookies==""){ 
            console.log("cookie为空-说明当前没有用户的cookie数据,应该将用户的信息存进去");
        }
    
        //分割获取全部cookie信息
        let arr = cookies.split(";");
    
        //获取 arr[arr.length-1]：最后一个cookie分割获取数据用户信息的数组
        let userMap =  arr[arr.length-1].split("=");
    
        //判断cookie是否存在，如果存在，直接取值即可，若不存在，则需要将本次登录的数据存入cookie
        //因为再拆分的时候会存在两端有空字符串的情况，为了确保字符串一致，所以需要使用trim方法除去两端空字符
        if(userMap[0].trim()=="userInfo"){ 
            flag = false;
            //userMap[1]是登录时的邮箱和密码，通过‘，’隔开，所以按‘，’分割
            //去除两端的{}括号
            let help = userMap[1].substring(1,userMap[1].length-1);
            //按','分割邮箱和密码
            let property = help.split(",");
            //获取值
            let temp1 = property[0].substring("'email:'".length);
            let temp2 = property[1].substring("'password':".length)
            console.log(temp1.substring(1,temp1.length-1));
            console.log(temp2.substring(1,temp2.length-1));
            //设置值：截取是因为需要消除两端的引号
            $email.val(temp1.substring(1,temp1.length-1));
            $password.val(temp2.substring(1,temp2.length-1));
            //模拟按钮的点击事件实现自动登录，或者发送一个请求
            console.log("2s后自动登录~~");
            //自动点击提交按钮:一定要设置延时，比如2秒后自动提交，否则它会一直提交下去，emm
            // setInterval($submit.click($submit.click()),2000);
            setTimeout(function () { 
                $submit.click($submit.click());
            },2000);
            // $submit.click($submit.click());
        }else{ 
            //如果当前还没有用户信息，则将该数据存入cookie，但不是在这里存，而是在提交请求的时候存
            //这里说明还没有用户的cookie数据，所以
            flag = true;
            console.log("为存入cookie做好了准备");
        }
    }
    
    //将数据存入cookie
    function setCookie() { 
        let cookieName = 'userInfo' // cookie名称
        //当前用户信息
        let data = { 
            email: $email.val(),
            password: $password.val()
        }
        //获取当前日期
        let d = new Date()
        let saveTime = 7// cookie保存时间（单位：天）
        //设置时间
        d.setDate(d.getDate() + saveTime);
        //将数据存入cookie
        document.cookie = cookieName + '=' + JSON.stringify(data) + ';path=/;expires=' + d.toGMTString()
    }

## 2、BUG ##

--------------------

当我点击登录按钮之后，发现拿不到数据，错误原因如下：  
![在这里插入图片描述][20210504162300267.png]  
user为空！！！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ3OTUzODU1_size_16_color_FFFFFF_t_70 1]  
刚开始，我很奇怪，明明在请求中已经拿到了数据，为什么会显示一个undefind呢？(这个之前还有一个小问题，因为一开始我是直接跳转到登录页面，所以搞了几天都没有发现问题在哪，相尽各种方法调试，都没有，都是一闪而过，直到今天，我它喵的为什么不把请求给return掉，啊啊啊，我是真蠢！) 我百思不解，直到今天，我突然想到ajax发送请求，会不会是和java的多线程类似，ajax请求是一个单独的线程，因为ajax请求还没执行完，而后面的代码先执行了，导致无法获取到数据，于是，我尝试给ajax后面的代码加了一个**setTimeout**事件，令其2s之后再执行，再测试，数据获取成功！

--------------------

## 3、总结 ##

在预加载事件中使用ajax请求，如果需要使用回调的数据，需要保证ajax请求完毕再去执行获取数据的操作，否则可能会出现获取到的数据为空的情况。因为ajax可能是一个单独的线程，当它还未执行完，而后面的代码已经开始执行，那么就会出现上面所说的异常——纯个人猜想，如有不妥之处，还望大佬斧正！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ3OTUzODU1_size_16_color_FFFFFF_t_70]: /images/20221021/3c14c0454c0a4adfbc47b6ead287522e.png
[20210504162300267.png]: /images/20221021/faabdbe621624f36956c3549cc1ff4e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ3OTUzODU1_size_16_color_FFFFFF_t_70 1]: /images/20221021/b24cc6ab428849a8acbd8637a3a388e4.png