AngularJS：返回承諾的響應-即上傳圖片然后提交表格

Question

我想了解AngularJS中的promise和$ q。 我想鏈接2個函數，並按順序執行它們。 第一個是文件上傳，可能需要一段時間，因此我需要等待其執行后才能為其創建數據庫記錄。 我最初使用的是angular 1.3，因此使用.success和.error方法。

這是代碼：

    //image upload function 

    $scope.imageUpload = function(){
        return $q(function (resolve, reject) {
              var fd = new FormData();
              fd.append("file", $scope.imageFile);
              var data = fd;
              var url = 'http://myApiUrl';
              var postObject = {
                  method: 'POST',
                  url: url,
                  data: data
              }
              $http(postObject)
                 .success(function(response) {
                     return response; 
              }).error(function(response) {
                     return response; 
              });
          })
      }

    // create a DB record 
    $scope.recordCreate = function(previousResponse){
          return $q(function (resolve, reject) {

               // does stuff with previousResponse, and creates a db record

            })
        };

    // do functions in order 

    $scope.imageUpload().then(
            $scope.recordCreate(response)
          );

我不僅收到錯誤

ReferenceError：未定義響應

（相對於最后一行$ scope.recordCreate（response）），第二個函數也在第一個函數之前執行！

我試圖按照這里的文檔https://docs.angularjs.org/api/ng/service/ $ q，但是在我的示例中，我無法使用第一個函數將響應返回到第二個。 有人知道為什么嗎？

Answer 1

您應該使用.success() .then()而不是.success()返回您的諾言，然后您可以對諾言進行操作並調用后續方法。

另外，我很好奇為什么您不只是在文件上傳調用中更新數據庫服務器端。

Answer 2

無需使用$q依次執行http請求。 使用諾言鏈來依次調用請求

$scope.imageUpload = function() {
    var fd = new FormData();
    fd.append("file", $scope.imageFile);
    var data = fd;
    var url = 'http://myApiUrl';
    var postObject = {
        method: 'POST',
        url: url,
        data: data
    }
    return $http(postObject)
}
$scope.recordCreate = function(previousResponse) {
    var url = 'db_url';
    var postObject = {
        method: 'POST',
        url: url,
        data: previousResponse
    }
    return $http(postObject)
};
$scope.imageUpload()
    .then(function(response) {
        return $scope.recordCreate(response.data)
    })
    .then(function(response) {
        console.log(response.data);
    })