ajax同步属性

最新推荐文章于 2024-04-26 17:07:18 发布

_sinye_

最新推荐文章于 2024-04-26 17:07:18 发布

阅读量189

点赞数

分类专栏：前端文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/sinye_/article/details/125542675

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

我在修改以前的项目时，前辈居然使用了ajax同步属性，使我大为震惊。因为使用同步后，页面无法任何操作，只能等请求完成才能执行其他函数，这个问题让我好找啊！
原文链接：ajax同步属性

ajax同步属性

什么是ajax同步属性

我们使用ajax都是看中它是异步请求，但有时候，项目需要先ajax获取到数据后再执行其他函数，这时就需要ajax同步，但现在都是使用async、await，所以ajax使用同步属性浏览器会报警告。
下面代码将很清楚知道ajax同步属性是什么：

<body>
    <div id="test" style="display: none;">123</div>
    <button onclick="sub()">提交</button>
</body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    function sub(){
        $('#test').show("slow")
        $.ajax({
            url: 'http://phpsocket.sinye.xyz/api/ip',
            type: "get",
            async: false, // ajax同步属性。false为同步，true为异步。
            dataType: 'json',
            success: function (data) {
                console.log(data)
                $('#test').hide("slow")
            },
            error: function() {
                console.log(false)
                $('#test').hide("slow")
            },
        })
    }
</script>

为什么jq会弃用并警告

因为现在新增了promise、async、await异步解决方案，而jq再去封装不利于程序员对异步同步的控制。jq的ajax同步属性直接导致页面js的停止，特别是有jq动画的时候，直接导致动画停止。比如上面代码，当我点击提交的时候，$('#test').show("slow")这段代码会在ajax执行完成后执行，ajax强行插入到同步队列里。由于js是单线程，就导致整个页面都在等待ajax。

ajax同步的正确用法

使用promise、async、await异步解决方案。

<body>
    <div id="test" style="display: none;">123</div>
    <div id="num">0</div>
    <button onclick="sub()">提交</button>
</body>
<script>
    $("#num").click(function(){
        this.innerText = ++this.innerText
    })
    async function sub(){
        $('#test').show("slow")
        await new Promise((resolve,reason)=>{
            $.ajax({
                url: 'http://phpsocket.sinye.xyz/api/ip',
                type: "get",
                dataType: 'json',
                success: function (data) {
                    console.log(data)
                    resolve(true)
                },
                error: function() {
                    console.log(false)
                    reason(false)
                },
            })
        })
        $('#test').hide("slow")
    }
</script>