來自嵌套http.put的返回值

Question

如何將http.put中的響應對象作爲TestFunction的返回值返回給控制器？ 來自http.get的響應打印成功，但putResponse未定義。在調試期間，我可以看到http.put更新服務器上的數據。

testFunction: function (url, data) { 
     var etag; 
     var putResponse; 
     $http.get(url).then(function successCallback(response) { 
      if (response.data != null) { 
       etag = response.headers(['etag']); 
       $http.put(url, data, { headers: { 'If-Match': etag } }).then(function successCallback(response) { 
        putResponse = response; 
       }, function errorCallback(response) { 
        // handle error 
       }); 
      } 
      else { 
       // handle error 

      } 

     }, function errorCallback(response) { 
      // handle error 

     }); 
     console.log(putResponse); 

    } 

Answer 1

$http.get和$http.put從代碼的其餘部分異步地執行。 你有console.log不在異步調用。所以它在返回之前被調用。

而且如果你想putResponse返回到「來電者」，你必須同時返回putResponse和承諾：

testFunction: function (url, data) { 
     var etag; 
     var putResponse; 
     var promise = $http.get(url).then(function successCallback(response) { 
      if (response.data != null) { 
       etag = response.headers(['etag']); 
       return $http.put(url, data, { headers: { 'If-Match': etag } }) 
      } 
      else { 
       // handle error 
       // $q.reject();  
      } 

     }).then(function successCallback(response) { 
      putResponse = response; 
      console.log(putResponse); // this gets called after the server responds (defined) 
      return putResponse; 
     }) 
     ["catch"](function (response) { 
       // handle error 
     }); 

     console.log(putResponse); // this gets called before the server responds (undefined) 
     return promise; 
    } 

現在你可以使用

tesFunction(arg1, arg2).then(function(response){ /* in here you have response defined */ }) 

Answer 2

一種方法是使用$q.all()返回多個承諾。

工作的jsfiddle：https://jsfiddle.net/sscovil/waxL8Lt8/

在該示例中，我使用的是$httpProvider攔截嘲笑HTTP響應;這與你所需要的不相關，只是爲了說明。

最重要的一點是myRestService功能：

function myRestServiceFactory($http, $q) { 
    return function() { 
    var deferredGet = $q.defer(); 
    var deferredPut = $q.defer(); 
    var promises = {}; 

    promises.get = deferredGet.promise; 
    promises.put = deferredPut.promise; 
    $http.get('https://example.com').then(onGetSuccess, onGetError); 

    return $q.all(promises); 

    function onGetSuccess(response) { 
     if (response.data != null) { 
     var etag = response.headers(['etag']); 
     var config = { 
      headers: {'If-Match': etag} 
     }; 
     $http.put('https://example.com', {}, config) 
      .then(onPutSuccess, onPutError); 
     deferredGet.resolve(response); 
     } else { 
     deferredGet.reject(response); 
     } 
    } 

    function onGetError(error) { 
     deferredGet.reject(error); 
    } 

    function onPutSuccess(response) { 
     deferredPut.resolve(response); 
    } 

    function onPutError(error) { 
     deferredPut.reject(error); 
    } 
    } 
} 

請注意，它使用$q.defer()創建兩個承諾，然後返回$q.all(promises)。這將返回一個承諾，你可以通過.then()附加一個回調，並且回調將得到地圖上承諾的反應是這樣的：

function MyController($scope, myRestService) { 
    $scope.values = {}; 
    myRestService().then(function (values) { 
     $scope.values.get = JSON.stringify(values.get); 
     $scope.values.put = JSON.stringify(values.put); 
    }); 
}