如何同步回调代码?

时间:2015-07-24 03:39:38

标签: javascript angularjs angular-promise

我必须在description变量中获取tmp并且我不知道如何同步此代码,有人可以帮助我吗?

我们希望在日历中呈现联系人用户first_name,即将标题附加到user.first_name。因此,我们正在从服务器获取所有事件,但是对于每个事件,预订和预订都包含用于从contact_users获取用户数据的用户ID。然后我们需要构造对象并将其推送到包含所有事件即tmp的数组。最后调用callback以在日历中呈现事件。

Event.query({
  businessId: $stateParams.businessId
})
.$promise.then(function(events) {
  events.forEach(function(event) {
    var tmpData = {};
    var description = '';
    $http.get('/businesses/'+event.business_id+'/events/'+event.id+'/bookings')
    .then(function(bookings) {
      if(bookings.data) {
        $http.get('/businesses/'+event.business_id+'/contact_users/'+bookings.data[0].people_id)
        .then(function(user) {
          description = user.data.first_name;
        });
      }
    });
    tmpData = {
      eventId: event.id,
      title: description,
      start: event.starts_at,
      end: event.ends_at,
      business_id: event.business_id,
      employment_id: event.employment_id,
      professional_id: event.professional_id,
      service_id: event.service_id,
    };
    tmp.push(tmpData);
  });
  return tmp;
}).then(function(result) {
  callback(tmp);
});

回调与callback方法中触发的fullcalendar events事件有关。

1 个答案:

答案 0 :(得分:3)

处理Promise回调时有两个关键概念:

从Promise成功回调导致返回会导致使用此值解析下一个承诺。

$q.when().then(function () {
    return 3;
}).then(function (result) {
    // result === 3
});

从Promise成功回调中返回另一个Promise 有效地取代现有的Promise。

$q.when().then(function () {
    return $timeout(function () { return 3 }, 1000);
}).then(function (result) {
    // called 1000ms later
    // result === 3
});

此外,还有一个构造$q.all(promises),它接受​​一系列promise,并返回一个新的promise,当promises全部被解析时(或当其中一个被拒绝时)解析。

我无权访问您的后端,因此我无法对此进行测试,但这样的事情对您有用:

Event.query({ businessId: $stateParams.businessId }).$promise
  .then(function (events) {
    // get array of $HttpPromise objects
    var promises = events.map(function (event) {
      return $http.get('/businesses/' + event.business_id + '/events/' + event.id + '/bookings')
        .then(function (response) {
          var bookings = response.data;

          // "transformed" event object
          var evt = {
            eventId: event.id,
            title: '',
            start: event.starts_at,
            end: event.ends_at,
            business_id: event.business_id,
            employment_id: event.employment_id,
            professional_id: event.professional_id,
            service_id: event.service_id
          };

          // each promised is replaced either with a new $HttpPromise...
          if (bookings) {
            return $http.get('/businesses/' + event.business_id + '/contact_users/' + bookings[0].people_id)
              .then(function (response) {
                var user = response.data;

                evt.title = user.first_name;
                return evt;
              });
          }

          // ...or with an immediately resolved event
          return evt;
        })
    });

    // wait for all promises to be resolved
    return $q.all(promises);
  }).then(function (results) {
    // results is an array of transformed events
    callback(results);
  });

旁注:另一种选择是不等待内部$http承诺解决,只返回“不完整”evt对象。

// launch a promise which updates evt when resolved
if (bookings) {
    $http.get('/businesses/' + event.business_id + '/contact_users/' + bookings[0].people_id)
        .then(function (response) {
            var user = response.data;

            // update evt reference
            evt.title = user.first_name;
        });
}

// immediately resolve with "incomplete" evt
return evt;

Angular会在每次解析承诺时触发摘要。根据您设置模板/渲染的方式,这可能会首先使用空title渲染所有事件,然后在first_name可用时重新渲染。请注意,这要求您在回调和模板之间保持evt个引用。