我想让我的代码更具可读性,使用 async/await 而不是使用 fetch()。
我的代码需要执行以下操作:
- 从 API 获取帖子
- 选择随机帖子(使用 find() 数组方法)
- 根据所选的随机发布数据进行另一个 API 调用。
我使用 fetch() 的方式
componentDidMount() {
const postsURL = 'https://jsonplaceholder.typicode.com/posts';
fetch(postsURL)
.then(res => res.json())
.then(posts => {
const randomNumber = Math.floor(Math.random() * 100);
const randomPost = posts.find(post => post.id === randomNumber);
fetch(
`https://jsonplaceholder.typicode.com/users/${
randomPost.userId
}`
).then(res => {
res.json().then(user => {
this.setState(() => {
return {
posts: posts,
showingPost: randomPost,
showingUser: user
};
});
});
});
})
.catch(err => console.log(err));
}
现在我正在尝试将这段代码完全转换为一个异步函数 getData()
async getData() {
// get posts
const getPostsResponse = await fetch(
'https://jsonplaceholder.typicode.com/posts'
);
const posts = await getPostsResponse.json();
// get showingPost
const randomPost = posts.find(
post => post.id === Math.floor(Math.random() * 100)
);
//get user
const getUserResponse = await fetch(
`https://jsonplaceholder.typicode.com/users/${randomPost.userId}`
);
const user = await getUserResponse.json();
// return/setState
return this.setState(() => {
return {
posts: posts,
showingPost: randomPost,
showingUser: user
};
});
}
componentDidMount() {
this.getData();
}
问题是 - 此异步函数中的 randomPost
变量有时会返回未定义。必须在进行下一个 API 调用之前对其进行设置。
如何在 2 个 API 调用之间正确使用 find() 或 async/await 函数内的任何其他方法?谢谢!
最佳答案
您更改了调用 find()
的方式。在使用 async/await
的代码中,您计算不同的随机数来测试每个数组元素,但在原始代码中,您只需计算 randomNumber
一次。第二种方式找到匹配的机会很低。
所以在新代码中做同样的事情。
async getData() {
// get posts
const getPostsResponse = await fetch(
'https://jsonplaceholder.typicode.com/posts'
);
const posts = await getPostsResponse.json();
// get showingPost
const randomNumber = Math.floor(Math.random() * 100);
const randomPost = await posts.find(
post => post.id === randomNumber
);
选择数组的随机元素的更简单方法是:
const randomPost = posts[Math.floor(Math.random() * posts.length)];
关于javascript - 在 Javascript 中的 API 调用之间使用 ASYNC/AWAIT 内的数组方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50804820/