当前位置 > it书童 > 大前端 > 正文

js异步编程的困境

大前端 it书童 2020-02-12 18:08:27 0赞 0踩 188阅读 0评论

程序并非顺序执行

var ret = '---';
$.ajax({
        url: 'http://localhost:3000/data',
        success: function(data) {
        ret = data;
        console.log(ret)
    }
});
console.log(ret) // ---

发起异步请求后,并不会等待结果回调,而是继续执行后面的程序。如果后面的程序依赖异步回调的输出就会触发异常

多个异步请求的结果顺序不可预测

$.ajax({
    url: 'http://localhost:3000/data',
    success: function(data) {
    console.log(data)
    }
});
$.ajax({
    url: 'http://localhost:3000/data1',
    success: function(data) {
    console.log(data)
    }
});
$.ajax({
    url: 'http://localhost:3000/data2',
    success: function(data) {
    console.log(data)
    }
});

无法预测多个异步请求返回结果的顺序,因为客户端不知道服务器究竟将耗时多久

回调地狱

如果非要确定回调的顺序,就需要在回调函数中嵌套另一层回调,层级多了,代码的可读性极差,江湖人称为回调地狱

$.ajax({
    url: 'http://localhost:3000/data',
    success: function(data) {
    console.log(data)
    $.ajax({
        url: 'http://localhost:3000/data1',
        success: function(data) {
        console.log(data)
        $.ajax({
            url: 'http://localhost:3000/data2',
            success: function(data) {
            console.log(data)
            }
        });
        }
    });
    }
});
转载须注明出处:https://www.itshutong.com/articles/435/the-dilemma-of-js-asynchronous-programming
关于我
一个文科出身的程序员,追求做个有趣的人,传播有价值的知识,微信公众号主要分享读书思考心得,不会有代码类文章,非程序员的同学请放心订阅
发表评论
我有句话,不知当讲不当讲?
要讲之前请先 登录