javascript - 在 Javascript 中的 API 调用之间使用 ASYNC/AWAIT 内的数组方法

Question

我想让我的代码更具可读性，使用 async/await 而不是使用 fetch()。

我的代码需要执行以下操作:

1. 从 API 获取帖子
2. 选择随机帖子(使用 find() 数组方法)
3. 根据所选的随机发布数据进行另一个 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 函数内的任何其他方法？谢谢!

Answer 1

您更改了调用 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)];