мне надо сделать два запроса на сервер. я использую reactjs . ответь с первого запроса надо использовать на втором запросе

Question

import { $authApi } from ".";

export const get_ids = async () => {
  const response = await $authApi.post("", {
    action: "get_ids",
    params: { offset: 10, limit: 3 },
  });
  console.log(response);
  return response;
};

export const get_items = async (ids) => {
  console.log(ids);
  const response = await $authApi.post("", {
    action: "get_items",
    params: { ids: ids },
  });

  console.log(response);
  return response;
};

const App = () => {
  const [products, setProducts] = useState([]);
  const [ids, setIds] = useState([]);

  useEffect(() => {
    get_ids()
      .then((data) => setIds(data.data.result))
      .then(setProducts(ids));
  }, []);
};

Answer 1

что бы вставить код на верху ответов/вопросов есть две кнопки пример кода/фрагмент кода

также ctrl+K либо наверное cmd+K(на маках) после вставки и видиления участка кода в сообшении

import { useEffect, useState } from "react";
import { $authApi } from ".";
//async/await тут не нужен если не надо логать resonse
export const get_ids = async () => {
  const response = await $authApi.post("", {
    action: "get_ids",
    params: { offset: 10, limit: 3 },
  });
  console.log(response);
  return response;
};
//async/await тут не нужен если не надо логать resonse
export const get_items = async (ids) => {
  console.log(ids);
  const response = await $authApi.post("", {
    action: "get_items",
    params: { ids: ids },
  });

  console.log(response);
  return response;
};

//без async/await
// export const get_items = (ids) => {
//   return $authApi.post("", {
//     action: "get_items",
//     params: { ids: ids },
//   });
// };


const App = () => {
  const [products, setProducts] = useState([]);
  //вроде лишнее
  // const [ids, setIds] = useState([]);

  //async/await
  useEffect(() => {
    const init = async () => {
      try {
        const ids = await get_ids();
        const items = await get_items(ids);

        setProducts(items);
      } catch (err) {
        console.error(err);
      }
    };
    init();
  }, []);

  //promise
  // useEffect(() => {
  //   get_ids()
  //     .then((ids) => get_items(ids))
  //     .then((items) => setProducts(items))
  //     .catch((err) => console.error(err));
  // }, []);

  return <span>111</span>;
};

//более правилная реализация создать кастомный хук(инкапсулировать инициализацию продуктов в хуке)

export const useProducts = () => {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    const init = async () => {
      try {
        const ids = await get_ids();
        const items = await get_items(ids);

        setProducts(items);
      } catch (err) {
        console.error(err);
      }
    };
    init();
  }, []);

  return {
    products,
  };
};

export const App2 = () => {
  const { products } = useProducts();

  return <span>222</span>;
};

БЛОГ НА HUSL

мне надо сделать два запроса на сервер. я использую reactjs . ответь с первого запроса надо использовать на втором запросе

Ответы (1 шт):