无法使用 Promise 命令执行 js 函数

Question

基本上，我需要 2 个函数 A 和 B 来获取数据，然后我想在成功获取数据后运行函数 C

这是我的代码：

JS：

var A = function() {

  $.getJSON('linkA', function(data) {
    a = data.total;
    console.log("A : " + a);
  });

  return new Promise(function(resolve, reject) {
    resolve('Got a');
  });
};

var B = function() {

  $.getJSON('linkB', function(data) {
    b = data.total;
    console.log("B:" + b);
  });

  return new Promise(function(resolve, reject) {
    resolve('Got b');
  });
};

function run() {
  Promise.all([A(), B()]).then(function() {
    console.log("Got A and B")
  });
}

HTML：

<script>
run();
</script>

我希望结果应该在控制台中：

A: //数据

B: //数据

得到A和B

但是，我仍然在其他两行之前得到了“Got A and B”。我猜是因为获取数据需要很长时间，所以程序首先编写“得到 A 和 B”。但必须有某种方式来实现目标？？

Answer 1

您会立即解决承诺，而不是等到您取回数据。

你也成为了 Promise 创建反模式的牺牲品。 $.getJSON 已经给了你一个 thenable*，所以只需使用它并使用 then 来转换数据（通过访问 total）：

var A = function() {
  return $.getJSON('linkA').then(function(data) {
    return data.total;
  });
};

B 也是如此。然后你的Promise.all 代码就可以工作了，如果你调整它，你实际上可以得到a 和b：

function run() {
  Promise.all([A(), B()]).then(function(results) {
    var a = results[0], b = results[1];
    // ...use `a` and `b`...
  });
}

或者如果你可以依赖 ES2015+ 的特性，你可以使用箭头函数和解构（如果你愿意，也可以使用普通函数和解构）：

function run() {
  Promise.all([A(), B()]).then(([a, b]) => {
    // ...use `a` and `b`...
  });
}

由于您的其余代码仅依赖于 jQuery，而不是浏览器中的 Promise 支持，您也可以使用 jQuery 的$.when：

function run() {
  $.when(A(), B()).then(function(a, b) {
    // ...use `a` and `b`...
  });
}

---

如果您需要明确地执行new Promise（您不需要在这里）来与非 thenable API 接口，它看起来像这样：

// YOU DON'T NEED TO DO THIS WITH $.getJSON, but with non-thenable APIs you might
var A = function() {
  return new Promise(function(resolve, reject) {
    $.getJSON('linkA', function(data) {
      resolve(data.total);
    }).fail(function(jqXHR, textStatus, errorThrown) {
      reject(errorThrown || new Error(textStatus));
    });
  });
};

---

* "thenable" - 类似于 Promise 的东西，参见 the Promises/A+ spec。

Answer 2

var url = 'https://jsonplaceholder.typicode.com/posts/';

Promise.all( [url + 1, url + 2 ].map( $.get ) )
  .then(
   console.log
  )

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>