Question

我正在尝试理解AngularJS中的promises和$ q。我想链接2个函数，并按顺序执行它们。第一个是文件上传，可能需要一段时间，所以我需要等待它在为它创建数据库记录之前执行。我最初使用的是角度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（响应）），但第二个函数正在执行第一个！

我试图按照这里的文档https://docs.angularjs.org/api/ng/service/ $ q但是在我的例子中我无法获得第一个函数来返回第二个响应。有谁知道为什么？

Answer 1

您应该使用.then()代替.success()来回复您的承诺，然后您可以采取行动并致电后续方法。

另外，我很好奇你为什么不在文件上传调用中更新数据库服务器端。

Answer 2

无需使用$q按顺序执行http请求。使用promise chain在另一个之后调用请求

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

AngularJS：返回承诺的响应 - 即图像上传然后提交表单

2 个答案: