Question

我为我的应用程序创建了一个通用的ajax调用函数来优化代码。问题是当我将该函数称为冻结页面时。请检查以下JS：

$(fuction(){
    $('.btn').click(function(){
        var data = getData('myaction/getinfo', []);
    })
});

function getData(url, data) {
    var result = "";
    $.ajax({
        url: url,
        type: 'POST',
        async: false,
        data: data,
        error: function () {
            console.log('error');
            $('.custom-loader').fadeOut("slow");
        },
        beforeSend: function () {
            $('.custom-loader').fadeIn("slow");
        },
        complete: function () {
            $('.custom-loader').fadeOut("slow");
        },
        success: function (res, status) {
            result = res;
            $('.custom-loader').fadeOut("slow");
        }
    });
    return result;
}

当我单击按钮时，ajax请求运行得很好，但是加载器直到ajax返回响应才显示（无法单击直到响应返回）。

如果我与async: true异步，它将继续执行代码，这会破坏功能（下一次执行取决于ajax响应）。有人可以帮我吗？

感谢前进！

Answer 1

异步操作的解决方案是回调（除非您使用es6 async / await）。这意味着，不希望函数返回值，而是向它们传递回调，这些回调将返回值作为参数。

在您的情况下，看起来像

$(function(){
    $('.btn').click(function() {
        getData('myaction/getinfo', [], function(res){
            console.log(res);
        });
    })
});

function getData(url, data, callback) {
    $.ajax({
        url: url,
        type: 'POST',
        data: data,
        error: function () {
            console.log('error');
            $('.custom-loader').fadeOut("slow");
        },
        beforeSend: function () {
            $('.custom-loader').fadeIn("slow");
        },
        complete: function () {
            $('.custom-loader').fadeOut("slow");
        },
        success: function (res, status) {
            $('.custom-loader').fadeOut("slow");
            callback(res);
        }
    });
}

Answer 2

您应该熟悉Javascript中的“回调”机制。只需在“成功”事件处理程序中调用您的后处理方法即可。

$(fuction(){
    $('.btn').click(function(){
        getData('myaction/getinfo', []);
    })
});

function postProcessing(data){
    //Put your processing logic here. e.g. Populate the data on the screen control
}

function getData(url, data) {
    $.ajax({
        url: url,
        type: 'POST',
        data: data,
        error: function () {
            console.log('error');
            $('.custom-loader').fadeOut("slow");
        },
        beforeSend: function () {
            $('.custom-loader').fadeIn("slow");
        },
        complete: function () {
            $('.custom-loader').fadeOut("slow");
        },
        success: function (res, status) {
            $('.custom-loader').fadeOut("slow");
            postProcessing(res);
        }
    });
}

来自回调函数的请求处理

2 个答案: