【问题标题】:Angular js wait for data before returnAngular js在返回之前等待数据
【发布时间】:2017-06-21 22:31:19
【问题描述】:

我有一个 Angular 服务,我在其中进行 http post 调用。此外,那里设置了一些常数值。最后,我使用 return 将这些数据发送到控制器,执行一些逻辑并将它们显示在视图中。

服务代码:

var apiurl = 'myurl';
  var apidata = {data: 'mydata'};
  var myDataPromise = httppostrequest($http, apiurl, apidata);

    myDataPromise.then(function(result) {
        service.datas = result;
        console.log("data.name"+result);
    });
    return service;

httppostrequest 函数:

function httppostrequest($http, apiurl, apidata){
    return $http({
        method : "POST",
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        url: apiurl,
        data: JSON.stringify(apidata),
        timeout: 5000
    });
}

请求成功并返回数据。问题是这条线

退货服务;

在将请求中的数据分配给服务变量之前执行。因此,来自 post 请求的数据甚至不会传递给控制器​​。

我使用过 node js,有一些方法和工具可以在需要时避免异步性质。使用 angularjs 我不明白。

【问题讨论】:

    标签: javascript angularjs asynchronous


    【解决方案1】:

    你完美地描述了正在发生的事情。 所以我的建议是在服务中将datas 的值初始化为一个空值(对象、数组或获取承诺后的任何内容),将承诺与服务相关联,然后简单地将承诺解决方案移动到您所在的位置真的需要操纵这些数据。所以在你的服务中:

    var apiurl = 'myurl';
    var apidata = {data: 'mydata'};
    service.datas = []; // if it will be an array for example
    service.myDataPromise = httppostrequest($http, apiurl, apidata);
    
    return service;
    

    然后在您需要的地方,只需注入您的服务并执行以下操作:

    myService.myDataPromise.then(function(result) {
      myService.datas = result;
      console.log("data.name"+result);
    });
    

    【讨论】:

    • 万一我误会了,你是不是建议我将服务注入其他地方(例如控制器)?
    • 没错,你明白了
    • 谢谢,这确实有效。而且我想我也明白其中的逻辑了。
    【解决方案2】:

    无论你有什么回报,你都必须把它放在成功方法中。否则你会看到这个问题。

    你可以这样做:

     var data = {} //your data
     var promiseURLMetaData = HttpService.httpPost("parseUrlMetadata", data);
     promiseURLMetaData.then(function (response) {
         var urlMetaData = response.data;
         return urlMetaData;
      })
     .catch(function (error) {
        console.log("Something went terribly wrong while trying to get URL Meta Data.");
     });
    

    【讨论】:

    • 试过了。现在没有返回任何内容,尽管 then 块已成功执行。也没有错误(我更改了 catch 块中的日志以显示错误)
    • 该服务是 Angular 服务吗?
    • @AmeliaGrimaldi 你可以做的是有一个服务,然后为数据添加setter和getter。然后,一旦您从 http 调用中获取数据,就通过 setter 添加它,然后当您访问数据时,通过 getter 访问它。这是唯一的方法。
    【解决方案3】:

    在结果函数中返回您的服务。

    var apiurl = 'myurl';
    var apidata = {data: 'mydata'};
    var myDataPromise = httppostrequest($http, apiurl, apidata);
    
        myDataPromise.then(function(result) {
            service.datas = result;
            console.log("data.name"+result);
            return service;
        });
    

    【讨论】:

      猜你喜欢
      • 2021-06-20
      • 2020-10-25
      • 1970-01-01
      • 2022-12-20
      • 2020-04-09
      • 2011-01-06
      • 1970-01-01
      • 1970-01-01
      • 2017-11-23
      相关资源
      最近更新 更多