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);
    })