将 async/await 与嵌套 Axios 调用的 for 循环结合使用

Question

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

我的问题是：我无法从 Axios 调用中获取结果const pages以填充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 循环调用通过。我通过将const pages修改为如下所示并看到两个调用都成功转到 Facebook Graph 来验证for call循环是否有效。

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);
});
});

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

答

感谢帕特里克·罗伯茨的帮助。由于我使用的是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(...)是一系列承诺(在您进行我建议的修复之后(，因此您也不应该直接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会停止控制流，直到承诺得到解决，因此，如果您有不需要按顺序排列的请求，最好先使用axios.get()创建所有请求，然后再一次await所有请求(如果可以的话(。