这对许多人来说可能是一个简单的问题，但我发现它非常令人困惑。我有一个使用"Promise.all"的"双重提取"，如下所示：
Promise.all([
fetch('https://jsonplaceholder.typicode.com/posts'),
fetch('https://jsonplaceholder.typicode.com/users')
]).then(function (responses) {
// Get a JSON object from each of the responses
return Promise.all(responses.map(function (response) {
return response.json();
}));
}).then(function (data) {
// Log the data to the console
// You would do something with both sets of data here
console.log(data);
}).catch(function (error) {
// if there's an error, log it
console.log(error);
});
我的问题是如何正确读取fetch调用的结果？如果您查看这两个URL，则每个URL的数据布局都不同。我理解两个fetch调用将数据格式化为"；0"；(对于"posts"(和"posts；1〃；(针对"用户"(。在这一点上，我很难剥离出具体的数据。例如，我尝试过(在其他尝试中(：
console.log(data[1].address[0].street);
console.log(data[1].address.street);
console.log(data[0].title);
console.log(data[0].title[3]);
有人能解释一下如何从"多个"提取调用中正确检索我需要的任何必要数据吗？我无法在互联网上找到与此主题相关的资源。。。可能是因为我不知道该搜索什么。我提前感谢你。我们非常感谢任何帮助，这非常令人沮丧。
我认为这个答案可能有助于您理解使用Promise.all((时数据发生了什么，以及如何检索对象属性，我在代码中添加了一些注释进行解释。
const handlePostsFetch = (posts) => {
// Do something with your Posts
console.log(posts);
// => [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
const firstPost = posts[0];
const secondPost = posts[1];
const thirdPost = posts[2];
console.log(firstPost.title);
// => "sunt aut facere repellat provident occaecati excepturi optio reprehenderit"
console.log(secondPost.body);
// => est rerum tempore vitae...
console.log(thirdPost.id);
// => 3
const allPostsIds = posts.map((post) => post.id);
console.log(allPostsIds);
// => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, …]
};
const handleUsersFetch = (users) => {
// Do something with your users
console.log(users);
// => [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
// Get first user
console.log(users[0]);
// => {id: 1, name: "Leanne Graham", username: "Bret", email: "Sincere@april.biz", address: Object…}
// get all user names
const allUsersNames = users.map(({ name }) => name);
console.log(allUsersNames);
// => ["Leanne Graham", "Ervin Howell", "Clementine Bauch", "Patricia Lebsack", "Chelsey Dietrich", "Mrs. Dennis Schulist", "Kurtis Weissnat", "Nicholas Runolfsdottir V", "Glenna Reichert", "Clementina DuBuque"]
};
// We are using async/await syntax to keep it clean and simple
// Promise all .then() passes response array of data (each data is also an array), here we simply destructure response array and await for results
// Then we pass each resolved data to functions
const handleSuccessResponse = async ([posts, users]) => {
handlePostsFetch(await posts.json());
handleUsersFetch(await users.json());
};
Promise.all([
fetch("https://jsonplaceholder.typicode.com/posts"),
fetch("https://jsonplaceholder.typicode.com/users")
])
.then(handleSuccessResponse)
.catch(function (error) {
// if there's an error, log it
console.log(error);
});
一些参考文献：
正在破坏->https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
访问对象属性->https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects
访问数组项->https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#access_an_array_item_by_its_index
为用户使用data[0]，为帖子使用data[1]运行良好，这不是问题所在。
您的特定日志语句不起作用，因为这两个响应都是对象列表。您尝试从列表中访问属性，而不是从列表中选择对象并访问其中的属性。
例如，如果你想获得第一个用户的地址，你需要做如下操作：
console.log(data[1][0].address.street)