0

Ситуация следующая

Имеются следующие функции:

  1. call - для обращения к API VK
  2. getMembers - получение пользователей определённой группы. (Цикл с паузой в 5 секунд между каждой итерацией)
  3. getMembersInfo - получение подробной информации о пользователях

Чего я пытаюсь добиться: Это выполнение скриптов в следующем порядке:

  1. getMembers - сначала получаем 1000 пользователей из группы
    • записываем полученных пользователей в стейт data
  2. getMembersInfo - получаем подробную информацию на этих пользователей, хранящихся в стейте data
    • записываем полученных информацию в тот же стейт data
  3. // здесь будет функция сохранения стейта в бд mongo

что в итоге у меня не получается:

  1. Данные не записываются в стейт, непонятно почему. При том что сами данные я получаю с сервера успешно.
  2. Хоть убейте, не пойму как должны работать эти промисы, чтобы операции выполнялись последовательно, а не так как сейчас.

ссылка на песочницу https://codesandbox.io/s/suspicious-greider-7yr4d?file=/src/App.js

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [data, setData] = useState([]);

  // обращаемся к API и возвращаем промис
  const call = (method, params) => {
    try {
      return new Promise((resolve, reject) => {
        VK.Api.call(method, params, res => {
          if (res) resolve(res.response);
          reject();
        });
      });
    } catch (e) {
      throw new Error(e);
    }
  };

  // получаем всех пользователей группы
  const getMembers = async () => {
    try {
      const members = await call("groups.getMembers", {
        group_id: 115050558,
        v: 5.9
      });
      const membersSize = await members.count;

      let count = 0;
      (function f() {
        console.log("начало итерации");
        if (count < Math.ceil(membersSize / 1000)) {
          const params = {
            group_id: 115050558,
            sort: "id_asc",
            count: 1000,
            offset: count * 1000,
            v: 5.9
          };

          call("groups.getMembers", params)
            .then(res => {
              console.log("шаг 1 -> // запись в стейт");
              setData(res);
              console.log("data после шага1 -> ", data); // стейт после записи пустой =(
            })
            .then(res => {
              console.log("шаг 2 ->  // запуск функции getMembersInfo");
              getMembersInfo();
              console.log("data после шага2 -> ", data);
            })
            .then(res => {
              console.log("шаг 3 -> // отправление в бд");
              // функция записи в бд
            })
            .catch(error => console.error(error));

          count++;
          setTimeout(f, 5000);
          console.log("Конец одной итерации");
        } else {
          console.log("Users loaded");
        }
      })();
    } catch (e) {
      throw new Error(e);
    }
  };

  // получаем подробную информацию по пользователям
  const getMembersInfo = async () => {
    let ids = data.join();

    const params = {
      user_ids: ids,
      fields: "id,first_name,last_name,nickname",
      name_case: "Nom",
      v: 5.89
    };

    const membersWithInfo = await call("users.get", params);
    setData(membersWithInfo);
    console.log("membersWithInfo ", membersWithInfo);
  };

  return <button onClick={getMembers}>Загрузить пользователей</button>;
}

1 ответ 1

0

Обрати внимание на следующее: "каждый вызов call() должен быть оформлен с обработкой результата выполнения !", т.е.

const membersWithInfo = await call("users.get", params); // НЕ ВЕРНО !

const membersWithInfo = await call("users.get", params)  // А НАДО:
.then(res => {
               // Делаем что-то когда промис выполнился !
            })
; 
1
  • Спасибо! Но пока это не помогло, третий день сижу мучаюсь, уже кучу статей перечитал и видео пересмотрел, но слепить до ума скрипт не получается =(
    – Michael
    23 апр 2020 в 16:48

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.