带有异步代码的 forEach 循环？

Question

我正在使用不同的参数进行 3 次函数调用：

this.getContributorProperties('followers_url', 'contributorFollowers');
this.getContributorProperties('gists_url', 'contributorGists');
this.getContributorProperties('repos_url', 'contributorRepositories');

这个函数看起来像这样：

async getContributorProperties(propertyUrl, propertyName) {
    const contributors = await this.addLinkToContributor();
    for (let i = 0; i < 10; i += 1) {
      axios.get(`${contributors[i][propertyUrl]}?per_page=100&${API_KEY}`).then((res) => {
        contributors[i][propertyName] = res.data.length;
      });
    }
    return contributors;
}

它遍历一组贡献者（对象类型）并为每个贡献者进行 API 调用。我需要为它们中的每一个进行 3 次 API 调用，因此一开始就进行了 3 次调用。 为了干燥我的代码，我想像这样创建一个 forEach 循环：

[
      ['followers_url', 'contributorFollowers'],
      ['gists_url', 'contributorGists'],
      ['repos_url', 'contributorRepositories'],
    ].forEach(this.getContributorProperties);

forEach 循环位于componentDidMount() 当我打 3 个电话时，它工作正常。但是当我做 forEach 时，我得到一个错误：

Uncaught (in promise) TypeError: Cannot read property 'addLinkToContributor' of undefined

如何让它发挥作用？

奖励：我如何将这些键值对分配给每个对象？

Answer 1

请参阅How to access the correct this inside a callback? 和/或How does the "this" keyword work?，了解您收到该特定错误消息的原因。

但从根本上讲，无论如何，您都不想将该函数传递给forEach，因为forEach 不会传递它想要的函数。

相反，只需使用箭头函数：

[
  ['followers_url', 'contributorFollowers'],
  ['gists_url', 'contributorGists'],
  ['repos_url', 'contributorRepositories'],
].forEach(pair => this.getContributorProperties(pair[0], pair[1]).catch(err => {/*...handle error...*/});

注意错误处理；我们不想要未经处理的拒绝，forEach 不会做任何事情来将它们传播给调用者。

---

不过，不将返回值用于任何事情似乎很奇怪。也许map 和Promise.all：

const results = await Promise.all([
  ['followers_url', 'contributorFollowers'],
  ['gists_url', 'contributorGists'],
  ['repos_url', 'contributorRepositories'],
].map(pair => this.getContributorProperties(pair[0], pair[1])));

...确保在调用者不处理错误的情况下处理错误。

---

请注意您的getContributorProperties 函数中有两个错误：

1. 它不会等待axios.get 完成后返回（async 函数不会自动-await 承诺，你必须明确）

2. 它不处理对axios.get返回的承诺的拒绝

我也很好奇重复调用this.addLinkToContributor 三次是否正确，第二次是否会浪费。

在您提出的评论中：

Results 是 3 个相同对象（贡献者）的数组，每个数组只更改了一个属性。因此，一个数组的贡献者有要点，另一个有追随者等。我现在是以某种方式将它们连接起来还是在getContributorProperties 函数中这样做更好？

那是我的直觉。比如：

async getContributorProperties(properties) {
    const contributors = await this.addLinkToContributor();
    return Promise.all(contributors.map(contributor =>
      Promise.all(properties.map(property =>
        axios.get(`${contributor[property.url]}?per_page=100&${API_KEY}`).then(res => {
          contributor[property.name] = res.data.length;
        })
      ));
    ));
}

这样称呼：

const results = await this.getContributorProperties([
  {url: 'followers_url', name: 'contributorFollowers'},
  {url: 'gists_url',     name: 'contributorGists'},
  {url: 'repos_url',     name: 'contributorRepositories'}
]);

---

（我们真的需要 await.all concept 这样上面就不会混淆它的隐喻......）