我试图了解如何在 javascript 中使用 Promise，但我的脚本从不执行“Then”

Question

我有一个脚本，它设置了一组用户名，然后为每个用户名运行一个 fetch 请求以 twitches API 端点获取每个用户的 Json 信息。然后我想将这些信息放入一个数组中以备后用，并发现我必须使用我以前从未使用过的 Promise。我通读了这个：https://developers.google.com/web/fundamentals/primers/promises 和这个：https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md，我在这里阅读了 Felix Kling 的回复：How do I return the response from an asynchronous call?，我仍然无法准确理解什么去哪里以及做什么。这是我到目前为止所拥有的：

var users = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]

var arr = [];

var headers = {
  'Client-Id': 'xxxxxxxxxxx'
}

var promise = new Promise(function usersJson(callback) {
  for (i = 0; i < users.length; i++) {
    var url = "https://api.twitch.tv/helix/users?login=" + users[i];
    fetch(url, {headers})
    .then(function(response) {
      return response.json();
    })
    .then(function(myJson) {
      arr.push(myJson);
    })
    callback(arr);
  };
})

promise.then(function(result) {
  console.log(result);
})

据我了解，这应该通过每个端点运行，将数据推送到我的数组变量，然后一旦整个事情“完成”，它应该用我的 promise 变量调用“then”事情来控制台。记录我的阵列。我得到的只是一个空白数组，我真的不确定我做错了什么。如果我将 console.log(arr) 放在 arr.push(json) 之后，我会返回 8 个数组，每个数组都附加了下一个响应主体，所以我知道调用正在工作，但我无法得到它坚持我的阵列。

Answer 1

改为这样做：

const runTheTrap = async function(users){
   const ret = [];
   for (i = 0; i < users.length; i++) {
    var url = "https://api.twitch.tv/helix/users?login=" + users[i];
    await fetch(url, {headers})
    .then(function(r) {
      return r.json().then(v => ret.push(v));
    });
  };

  return ret;
}


runTheTrap(users).then(function(result) {
  console.log(result);
});

但坦率地说 async/await 有点“迟到”，我更喜欢这种方法：

     const runTheTrap = function(users){
        return users.map(function(u){
          var url = "https://api.twitch.tv/helix/users?login=" + u;
          return fetch(url, {headers}).then(r => {
              return r.json();
          });
      }



      Promise.all(runTheTrap(users)).then(function(vals){
          // you have your vals
       });

Answer 2

为了得到你想要的结果，你的代码可以重写为

const users = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]

const headers = {
  'Client-Id': 'xxxxxxxxxxx'
}

Promise.all(users.map(user => fetch(`https://api.twitch.tv/helix/users?login=${user}`, {headers}).then(response => response.json())))
.then(result => console.log(result));

更具可读性

const users = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]

const headers = {
  'Client-Id': 'xxxxxxxxxxx'
}

const mapper = user => 
    fetch(`https://api.twitch.tv/helix/users?login=${user}`, {headers})
    .then(response => response.json());

const promises = users.map(mapper);

Promise.all(promises)
.then(result => console.log(result));

最后，由于您的原始代码不了解 ES2015+

var users = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

var headers = {
    'Client-Id': 'xxxxxxxxxxx'
};

var mapper = function mapper(user) {
    return fetch("https://api.twitch.tv/helix/users?login=" + user, { headers: headers }).then(function (response) {
        return response.json();
    });
};

var promises = users.map(mapper);

Promise.all(promises).then(function (result) {
    return console.log(result);
});

Answer 3

一种可以帮助您在 Promise 中进行更多思考的方法是，一旦您处于 Promise-land 中，您只能在您仍在 Promise-land 中时获取数据。在您的示例中，您从 fetch 承诺中获取数据。这意味着您只能在 fetch 承诺中使用该数据。注意这里：

.then(function(myJson) {
  arr.push(myJson);
})
callback(arr);

您在其中构建数组的arr.push 是inside promise，但callback(arr) 是outside。由于您不再处于承诺范围内，因此您无法获取数据。

在您的情况下，您还希望同时等待多个承诺，因为您一次从多个来源获取数据。最好的方法是使用Promise.all 和一系列承诺：

const promise = Promise.all(users.map(user => {
    const url = `https://api.twitch.tv/helix/users?login=${user}`;
    return fetch(url, { headers })
    .then(function(response) {
      return response.json();
    });
}));

现在promise.then 将允许您在所有承诺解决后访问数据数组。您无需推送到另一个数组，.map 将为您创建承诺数组。

---

您也可以使用async / await 语法编写此代码，这样更容易推理并且可能更简洁。

const promise = Promise.all(users.map(async user => {
    const url = `https://api.twitch.tv/helix/users?login=${user}`;
    const response = await fetch(url, { headers });
    return response.json();
}));

---

顺便说一句，你应该只需要在使用本身不实现承诺的库时使用new Promise。 fetch 已经返回了一个 Promise，所以当你调用它时，你已经得到了一个 Promise，所以不需要用 new Promise 包装它。