從jquery失敗的Webapi調用

以下是Jquery調用webapi方法的代碼片段。當我調用方法GetAllEmployees()時，它將返回數據作爲undefined，一旦它離開函數Success被調用。爲什麼會發生？我想要的結果，一旦我調用該函數從jquery失敗的Webapi調用

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

真的很困惑，爲什麼它的行爲這樣一旦函數被調用它返回爲什麼叫末成功函數的數據。基於進一步的計算完成後，我實際上需要函數的結果。真的很感謝這方面的幫助！

在此先感謝！

來源

2017-01-28 Kumee

嗨，你能告訴我你檢查了networkTab，並且你從web api返回的數據獲得了請求嗎？ –

是的，我可以使用開發人員工具 – Kumee

查看IE中的數據，返回的數據類型是什麼？你把它設置爲json你的反應是有效的json？ –

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

承諾

同樣，你可以用承諾來寫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 
})

但是請注意，爲了使用promise，您需要傳輸代碼以獲得完整的瀏覽器支持。

來源

2017-01-28 13:57:05

從jquery失敗的Webapi調用

回答

相關問題