2017-01-28 3 views
0

Ниже приведен фрагмент кода JQuery для вызова метода webapi. Когда я вызываю метод GetAllEmployees(), он возвращает данные как undefined после того, как он покидает функцию, которую вызывает метод Success. Почему это происходит? Я хочу, чтобы результат когда я вызываю функциюWebapi call from jquery failing

<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> 

Действительно смущен, почему она ведет себя, как это когда-то функция называется она должна возвращать данные, почему он называется в конце функция успеха. Мне действительно нужен результат функции, когда она вызывается на основе того, что выполняется дальнейший расчет. Радуйся за любую помощь!

Заранее благодарен!

+0

привет, пожалуйста, скажите мне, что вы проверили networkTab, и у вас есть запрос на получение вместе с данными, возвращаемыми из веб-api? –

+0

Да, я могу видеть данные, поступающие в IE, с помощью инструментов разработчика – Kumee

+0

и каков возвращаемый тип данных? вы устанавливаете его как json, ответ вы действительно json? –

ответ

1

Javascript is asynchronous. Это означает, что, когда вы вызываете функцию, которая является асинхронной (например, вызов вашего webapi), обработка JS не ждет, пока она не получит ответ, но продолжит. В конце концов, когда сервер отвечает, вызывается функция обратного вызова (в вашем случае метод success). Вот почему ваш EmpData - undefined. Что вы можете сделать, это передать обратный вызов вашему GetAllEmployees или использовать что-то вроде promises, если вы можете использовать ES6.

Callbacks

Рассмотрим это:

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. 
     } 
    }); 
    }); 

Обещания

Кроме того, вы можете использовать обещания писать asynchr onous код синхронно. Рассмотрим это:

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 
}) 

Но обратите внимание, что для того, чтобы использовать обещания вам нужно transpile код для того, чтобы получить полную поддержку браузера.