javascript - 异步 JavaScript， promise 链接 - 函数在解析后不会执行

Question

我正在兑现 promise 。当我链式 promise 最后then block 不会被执行。所有其他 block 都被执行，但在最后一个 promise 解决之后什么也没有发生。有人可以向我解释一下我错过了什么吗？

var x = 1;
$(document).ready(function() {
  getJobId(token).then(function(rsp) {
    return rsp;
  }).then(function(job_id) {
    looper().then(function(rsp) {
      console.log("app finished : " + rsp); // this block never gets called
    });
  });
});

function getJobId(token) {
  // does an API call that returns a promise
  return $.ajax({
    url: "url"
  });
}

function looper() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      // if the call is successful
      if (x == 5) {
        resolve(1); // returns the value 1
      } else {
        x++; // we increment the value of the counter
        console.log("not solved yet");
        looper(); // we call the same function again
      }
    }, 5000); // (waits for 5 seconds)
  });
}

Answer 1

问题在于您永远无法解决您正在等待的 promise ，这是 looper 返回的第一个 promise 。

您必须始终解决或拒绝一项 promise ，或使其依赖于另一项 promise 。在这种情况下，要做的最小改变就是通过将 Promise 从后续的 Looper 传递到 resolve 中，使前面的依赖于后面的:

resolve(looper()); // we call the same function again

但这不是我会做的。相反，我不会让 looper 调用自身。我会让它直接处理事情:

function looper() {
  function loop(resolve, reject) {
    setTimeout(function() {
      // if the call is successful
      if (x == 5) {
        resolve(1); // returns the value 1
      } else {
        x++; // we increment the value of the counter
        console.log("not solved yet");
        loop(resolve, reject);
      }
    }, 5000); // (waits for 5 seconds)
  }
  return new Promise(loop);
}

<小时/>

作为一个单独的问题，您不处理失败。这样做很重要。在这种情况下，可能会在 ready 处理程序中从 looper.then 返回 promise 并添加 catch:

var x = 1;
$(document).ready(function() {
  getJobId(token).then(function(rsp) {
    return rsp;
  }).then(function(job_id) {
    return looper().then(function(rsp) {
      console.log("app finished : " + rsp); // this block never gets called
    });
  }).catch(function(error) {
    // Handle/report error here
  });
});

function getJobId(token) {
  // does an API call that returns a promise
  return $.ajax({
    url: "url"
  });
}

function looper() {
  function loop(resolve, reject) {
    setTimeout(function() {
      // if the call is successful
      if (x == 5) {
        resolve(1); // returns the value 1
      } else {
        x++; // we increment the value of the counter
        console.log("not solved yet");
        loop(resolve, reject);
      }
    }, 5000); // (waits for 5 seconds)
  }
  return new Promise(loop);
}

<小时/>

旁注 2:由于您使用的是 Promise，我认为您的目标是现代环境。既然如此，您可能会考虑使用 fetch (它返回一个 native Promise)而不是 $.ajax，它返回一个 jQuery jqXHR 对象，该对象在某种程度上与 Pr​​omise 兼容。