将 async/await 与 for 循环一起用于嵌套的 Axios 调用

Question

我正在使用 Axios 对 Facebook Graph 执行 GET 请求，以获取用户管理的 Facebook 页面列表。一旦我有了它，我就会使用for loop 对 Facebook Graph 执行另一个 GET 请求，以在用户管理的每个 Facebook 页面上提取数据。我在async function 内部执行此操作，最后使用Promise 将所有数据合并到一个const fbProfile 中。

我的问题是：我无法从 const pages 中的 Axios 调用中获取结果以填充 pages 数组。

我的代码如下：

  async function getfbProfile(token) {
    try {
      const user = await axios.get('https://graph.facebook.com/me', {
        params: {
          access_token: `${token}`,
          fields: 'picture,accounts',
        },
      });
      const pages = await user.data.accounts.data.forEach((err, pageInfo) => {
        axios.get(`https://graph.facebook.com/${user.data.accounts.data[pageInfo].id}`, {
          params: {
            access_token: `${token}`,
            fields: 'picture,name',
          },
        });
      });
      const fbProfile = await Promise.all([user, pages]);
      debug(fbProfile);
    } catch (err) {
      debug(err.stack);
    }
  }

我知道第一个调用通过并且 for 循环调用通过。我验证了for call 循环的工作原理，将const pages 修改为如下所示，并看到两个调用都成功转到Facebook Graph。

  const pages = await user.data.accounts.data.forEach((err, pageInfo) => {
    axios.get(`https://graph.facebook.com/${user.data.accounts.data[pageInfo].id}`, {
      params: {
        access_token: `${token}`,
        fields: 'picture,name',
      },
    })
      .then((result) => {
        debug(result);
      });
  });

我将非常感谢任何帮助。这两天我一直在为此绞尽脑汁。感谢您提供的任何帮助。

回答

感谢Patrick Roberts 的帮助。由于我使用的是 Airbnb 的 ESLint 配置文件，因此我必须修改下面的示例以通过 linting。再次感谢！

  async function getfbProfile(token) {
    try {
      const user = await axios.get('https://graph.facebook.com/me', {
        params: {
          access_token: token,
          fields: 'picture,accounts',
        },
      });
      const pages = Promise.all(user.data.accounts.data.map(({ id }) => axios.get(`https://graph.facebook.com/${id}`, {
        params: {
          access_token: token,
          fields: 'picture,name',
        },
      })));
      const fbProfile = await Promise.all([user, pages]);
      debug(fbProfile);
    } catch (err) {
      debug(err.stack);
    }
  }

Answer 1

Promise.all() 对于user 来说不是必需的，因为它不是一个承诺，因为您已经使用await 解开axios.get()。 user.data.accounts.data.map(...) 是一个 array 承诺（在你做出 the fix I suggested 之后），所以你也不应该直接 await 它。

这是一个简化的方法：

async function getfbProfile(token) {
  try {
    const user = axios.get('https://graph.facebook.com/me', {
      params: {
        access_token: token,
        fields: 'picture,accounts',
      },
    });
    const pages = Promise.all(user.data.accounts.data.map(({ id }) => {
      return axios.get(`https://graph.facebook.com/${id}`, {
        params: {
          access_token: token,
          fields: 'picture,name',
        },
      });
    }));
    const fbProfile = await Promise.all([user, pages]);
    debug(fbProfile);
  } catch (err) {
    debug(err.stack);
  }
}

这样，user 和 pages 请求可以同时发生而不是顺序发生。 await 暂停控制流直到 promise 被解决，所以如果你有不需要顺序的请求，最好在 awaiting 之前用 axios.get() 创建所有它们，如果你可以。