Question

下面是调用webapi方法的Jquery的代码片段。当我调用方法GetAllEmployees()时，它会将数据作为undefined返回，一旦它离开函数，方法Success就会被调用。为什么会这样？一旦我调用函数

，我想要结果

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>GetAllCust</title>
    @*<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>*@

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        function GetAllEmployees()
        {
            var Result;
            // debugger;
            jQuery.support.cors = true;
            $.ajax({
                url: 'http://localhost:61883/APIService/api/Employee/GetAllEmployees',// service call
                type: 'GET',
                dataType: 'json',
                success: function (data)
                {

                    Result = data;// Not returning the data
                    $.each(data, function (index, employee)
                    {
                        console.log(employee.EmpName);
                        alert(employee.EmpName);
                    });
                },
                error: function (x, y, z) {
                    alert(x + '\n' + y + '\n' + z);
                }
            });
            return Result;//Not sending the result
        }
        // Calling the  method here
        $(document).ready(function ()
        {
            debugger;
            var EmpData = GetAllEmployees();
            //  I see the empdata as undefined
        });
        //Once i come out from here i see the method  console.log diplsaying the data
    </script>
</head>
<body>
    <div>
    </div>
</body>
</html>

真的很困惑为什么一旦调用该函数它就会像这样表现它必须返回数据为什么它在成功函数结束时被调用。实际上，一旦根据进一步的计算进行调用，我就需要函数的结果。非常感谢任何帮助！

提前致谢！

Answer 1

Javascript是asynchronous。这意味着，当你调用一个异步的函数（比如调用你的webapi）时，JS处理不会等到它得到响应，而是继续。最终，当服务器响应时，调用回调函数（在您的情况下为success方法）。这就是您EmpData为undefined的原因。您可以做的是将回调传递给GetAllEmployees，或者如果您可以使用ES6则使用promises之类的内容。

<强>回调

考虑一下：

function GetAllEmployees(cb)
        {
            jQuery.support.cors = true;
            $.ajax({
                url: 'http://localhost:61883/APIService/api/Employee/GetAllEmployees',// service call
                type: 'GET',
                dataType: 'json',
                success: function (data)
                {
                    cb(null, data)
                },
                error: function (error) {
                    cb(error, null)
                }
            });
        }

然后：

$(document).ready(function ()
  {
     GetAllEmployees(function(err, data){
         if(!err) {
         //here you have access to your data.
         }
     });
  });

<强>承诺

同样，您可以使用promises以同步方式编写异步代码。考虑一下：

function GetAllEmployees() {
    return new Promise(function(resolve, reject){
        jQuery.support.cors = true;
        $.ajax({
            url: 'http://localhost:61883/APIService/api/Employee/GetAllEmployees',// service call
            type: 'GET',
            dataType: 'json',
            success: function (data)
            {
                resolve(data)
            },
            error: function (error) {
                reject(error)
            }
        });
    });
}

GetAllEmployees().then(function(data){
    //here you have access to the data
}).catch(function(err){
    //error occurred
})

但请注意，为了使用promises，您需要转换代码才能获得完整的浏览器支持。

来自jquery的Webapi调用失败

1 个答案: