分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了具有promise和defer的angularJS中的同步和异步调用，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我用服务创建了2个服务调用跟随控制器.第二个响应在此之前出现.我想做的就像我需要第一个响应第一个和第二个响应秒.但我只是坚持异步和同步请帮我解决.

第二次通话取决于第一次通话.例如,如果第一次调用返回10记录,那么我必须从第一次响应中调用第二次Web服务10次.所以我使用循环,但它是不正确的.@H_450_7@

调节器@H_450_7@

var mycompaigndata = [];

asyncservice.loadDataFromUrls($http.get(WSURL + 'api/first/',{
    headers: 
    {
        "Authorization":'Bearer <my-token>'
    }
}))
.then(function(data)
{
    console.log(data);
});


asyncservice.loadDataFromUrls($http.get(WSURL + 'api/second',{
    headers:
    {
        "Authorization":'Bearer <my-token>'
    }
}))
.then(function(data)
{   
    console.log(data);
});

服务@H_450_7@

app.service('asyncservice',function($http,$q) 
{
    return {
        loadDataFromUrls: function(url) 
        {
            var deferred = $q.defer();
            var urlCalls = [];

            urlCalls.push(url);

            $q.all(urlCalls)
            .then(
            function(results) 
            {
                deferred.resolve(results) 
            },function(errors) 
            {
                deferred.reject(errors);
            },function(updates) 
            {
                deferred.update(updates);
            });
            return deferred.promise;
        }
    };
});

解决方法

要确保在第一个呼叫完成后执行第二个呼叫,请将第二个呼叫置于第一个呼叫之后.要根据第一次调用的结果@L_674_11@进行多次“第二次”调用,请使用$q.all.

asyncservice.loadDataFromUrls('api/first/')
.then(function(firstData) {
    //assuming firstData is an array of 'x' items,do a call for each of these items:
    console.log('results of first call holds ' + firstData.length + ' items');
    var promises = [];
    for(var i = 0; i<firstData.length; i++){
        var id = firstData[i].id;//you can use this to pass to the second call
        promises.push(asyncservice.loadDataFromUrls('api/second'));
    }
    return $q.all(promises);
})
.then(function(results) {
  //'results' is an array of results,the nth item holds the result of the 'nth' call to loadDataFromUrls
  for(var i = 0; i<results.length; i++){
    console.log('result nr. ' + i + ' :' + results[i])
  }
});

通过使用return $q.all(promises),你可以避免厄运的承诺金字塔,并保持扁平结构.@H_450_7@

您的服务代码不再需要循环.作为旁注,您可以缩短服务代码并避免使用“显式承诺构造反模式”(见here),如下所示：@H_450_7@

app.service('asyncservice',$q) 
{
    return {
        loadDataFromUrls: function(url) 
        {
            return $http.get(WSURL + url,{
                headers: {
                  "Authorization": 'Bearer <my-token>'
                }
            }).then(function(responsE){ return response.data; });
        }
    };
});