javascript - 如何根据条件添加更多 promise

Question

我有一些 API 调用，只需在编辑模式下执行代码时才需要进行，但我有一个特定的 API 调用，必须在创建和编辑这两种模式下进行。

这是我现在编写的代码:

// other controller code
var config = {};

var image = {
  dc: { name: 'abc' },
  cl: { name: 'def' },
  ds: { name: 'ghi' },
  net: { name: 'jkl' }
};

// Turns on the loader
vm.loading = true;

// I'll always have to get list of DCs, be it create or edit mode
promise = getDc()
  .then(function(response) {
    config.dc = response.data.dc;
    return $q.resolve(response.data.dc);
  }, function() {
    return $q.reject('Failed to get DCs');
  })

// If edit mode, I need to fetch list of Cls, Nets and DSs.
// These all are dependent on list of DCs.
if (editMode) {
  promise
    .then(function(dcs) {
      image.dc = _.find(dcs, { name: image.dc.name });

      return $q.all([
          getCl(image.dc),
          getNet(image.dc)
        ])
        .then(function(response) {
          config.cl = response[0].data.cls;
          config.net = response[1].data.nets;

          return $q.resolve([response[0].data.cls, response[1].data.nets]);
        }, function() {
          return $q.reject('Failed to get cls or nets');
        });
    })
    .then(function(lists) {
      image.cl = _.find(lists[0], { name: image.cl.name });
      image.net = _.find(lists[1], { name: image.net.name });

      return getDs(image.dc, image.cl)
        .then(function(response) {
          config.ds = response.data.ds;

          return $q.resolve(response.data.ds);
        }, function() {
          return $q.reject('Failed to get DSs');
        });
    })
    .then(function(dss) {
      image.ds = _.find(dss, { name: image.ds.name });
      return $q.resolve();
    });
}

promise
  .then(function() {
    // Will open modal here
  })
  .catch(function(error) {
    // Print any error thrown in between
    console.error(error);
  })
  .finally(function() {
    // Turns off the loader
    vm.loading = false;
  });

因此，在创建模式下，我将在获取 DC 后直接打开模态，但在编辑模式下，我还必须加载其他一些内容。

这里的问题是，加载器仅在 DC 加载完成后才会显示，并且模式会在此之后打开。它不会等待其他元素先加载。

有什么线索吗？

Answer 1

您在 if (editMode) { 之后创建的 Promise 链源自您的原始 Promise，但不会替换它。整个链的执行独立于您在 if() 条件之后定义的逻辑。要解决此问题，请重新分配 promise :

if (editMode) {
  promise = promise
    .then(function(dcs) {
    ...
}