Использование метода Array внутри ASYNC / AWAIT между вызовами API в Javascript

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.

Как правильно использовать find () или любой другой метод внутри функции async / await между 2 вызовами API?Спасибо!

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)];