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

Posted 2023-03-30

【中文标题】在 Javascript 中的 API 调用之间使用 ASYNC/AWAIT 中的数组方法

【英文标题】：Using Array Method inside ASYNC/AWAIT between API calls in Javascript

【发布时间】：2018-11-21 02:56:30

【问题描述】：

我想让我的代码更具可读性，使用 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 函数中的任何其他方法？谢谢！

【问题讨论】：

这不起作用吗？你有什么问题？

@zero298 刚刚编辑

posts.find() 不是异步的，你不应该使用await。

问题是有时你的posts.find()调用中的回调函数永远不会匹配任何帖子，所以你得到undefined。

这与改变编码风格无关，您应该与原始代码有同样的问题。

【参考方案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)];