Как сделать несколько последовательных запросов на сервер ReactJs

Question

import { useParams } from "react-router-dom";
import { useEffect, useState } from "react";
import axios from "axios";

export const useFetchVacancy = () => {
 const { id } = useParams();
 const [vacancy, setVacancy] = useState({});
 const [technologies, setTechnologies] = useState();
 const [addVacancy, setAddVacancy] = useState();
 const url = `http://localhost:8000/api/vacancy/${id}/`;
 const urlAdd = `http://localhost:8000/api/vacancy/?&technologies=${technologies}/`;
 const fetchAsycn = async () => {
 const { data } = await axios(url);
 setVacancy(data);
 setTechnologies(data.technologies[0]);
 window.scrollTo(0, 0);
 };
const fetchAsycn2 = async () => {
 const add = await axios(urlAdd);
 setAddVacancy(add.data.results);
 console.log(add.data.results);
 window.scrollTo(0, 0);
};

useEffect(() => {
  fetchAsycn();
  fetchAsycn2();
}, []);

return { vacancy, addVacancy };
};

Есть вот такой хук. В первом запросе я запрашиваю одну вакансию по id. Затем хочу взять у нее из поля technologies первый элемент и сделать второй запрос уже с этим параметром. Для этого вызываю

 setTechnologies(data.technologies[0])

 const urlAdd = `http://localhost:8000/api/vacancy/?&technologies=${technologies}/`;

 const [vacancy, setVacancy] = useState({}); // Для самого первого запроса
 const [technologies, setTechnologies] = useState(); // Тут хранится будущий параметр для второго запроса
 const [addVacancy, setAddVacancy] = useState(); // Вакансии полученные со второго запроса

Но, к сожалению, technologies = undefined когда я делаю второй запрос.

Answer 1

У тебя же функция асинхронная, после каждой функции используй then, тогда у тебя всё будет работать синхронно. useEffect(() => { fetchAsycn().then(() => fetchAsycn2()); }, []); Однако, можешь сделать отдельную асинхронную функцию получения запросов, тогда можешь использовать await.

async function getApiRequest() {
   await fetchAsycn();
   await fetchAsycn2();
}
useEffect(() => getApiRequest())

БЛОГ НА HUSL

Как сделать несколько последовательных запросов на сервер ReactJs

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