javascript - 嵌套 AJAX 调用中的变量作用域

Question

我有一组自定义用户数据，我想对其进行 ajax 调用，如果没有用户数据，则进行另一个 ajax 调用以检索一组默认数据，然后执行一个函数解析数据。这是一个例子:

var oData = [],
    exampleUrl = 'example.php';
$.ajax({
    url:    exampleUrl + '?query=getUserData',
    contentType:    'application/json;odata=verbose',
    headers:        {
        'accept':   'application/json;odata=verbose'
    },
    success : function(data, request){
        // Request succeeded
        // Check the results
        if(data.length){
            // There are custom user results!
            // Parse the results
            oData = data;
        }
        else{
            // There were no custom user results...
            // Run another query to retrieve default values
            $.ajax({
                url:    examplUrl + '?query=getDefaultData',
                contentType:    'application/json;odata=verbose',
                headers:        {
                    'accept':   'application/json;odata=verbose'
                },
                success : function(data, request){
                    // Request succeeded
                    // Check the results
                    if(data.length){
                        // There was some default data!
                        // Parse the results
                        oData = data;
                    }
                    else{
                        // No data was found...
                        // Attempt to be helpful
                        console.log('No Default data was found!');
                    }
                },
                error : function(data, request){
                    // There was an error with the request
                    // Attempt to be helpful
                    console.log('Error retrieving data:');
                    console.log(data);
                    console.log(request);
                }
            });

        }
    },
    error : function(data, request){
        // There was an error with the request
        // Attempt to be helpful
        console.log('Error retrieving Custom User data:');
        console.log(data);
        console.log(request);
    },
    complete : function(){
        // Do something with the data
        index.displayData(oData);
    }
});

问题是，如果运行第二个 ajax 调用，oData 在传递给 index.displayData() 时根本不包含任何数据。我猜这与 ajax 调用的异步性质有关，但不应该在“成功”运行后运行“完成”吗？

我也知道我可能不应该使用 ajax“毁灭金字塔”，而应该使用 promises，但我已经尝试过它们并一直得到相同的结果。

感谢您的协助!

Answer 1

正如 Violent Crayon 所指出的，您可以尝试自己调用“完成”而不是依赖 JQuery 的隐式控制流:

function getData(exampleUrl, onComplete){
    $.ajax({
        success : function(data, request){
            if(data.length){
                onConplete(data);
            }else{
                $.ajax({
                    success : function(data, request){
                        if(data.length){
                            onComplete(data);
                        }else{
                            console.log('No Default data was found!');
                        }
                    },
                    error : function(data, request){
                        console.log('Error retrieving data:');
                    }
                });
            }
        },
        error : function(data, request){
            console.log('Error retrieving Custom User data:');
        }
    });
}

var oData = [];
getData('example.php', function(data){
    oData = data;
    index.displayData(oData);
}

顺便说一句，请注意如何让异步函数接收它们自己的返回和错误回调。这有助于减少厄运金字塔问题，而无需使用 promise ，也无需对返回回调进行硬编码。