使用fetch api访问项目

Question

我想使用fetch和async/await访问API中的用户列表，并将它们显示在我的html页面中。

我收到了对象，我想使用访问项目

我收到了对象，我想使用地图访问这些项目。

但我得到了这个错误：

未捕获(承诺中)类型错误：response.map不是函数

我试过这个：

async function getData() {
let response = await ((await fetch("https://reqres.in/api/users?page=1")).json());

return response.map(user => {user.id;});
}
getData()
.then(data => {
console.log(data[0])
});

Answer 1

如果仔细观察，response不是一个数组。您实际收到的对象具有以下结构：

{
page: 1,
per_page: 6,
total: 12,
total_pages: 2,
data: [...]
}

所以你想访问response.data

Answer 2

您的响应不是数组。map()对其无效。数据[0]也无效。看来你是有意做response.data.map((user) => user.id)的。

async function getData() {

const response = await ((await fetch("https://reqres.in/api/users?page=1")).json())
return response.data.map((user) => user.id)
}
getData()
.then(data => {
console.log(data)
})

如果您仍然只想获得第一个响应，那么您可以使用以前使用的data[0]。