有没有办法在另一个 api 呼叫的 map 内进行 api 呼叫？

Question

I know the title is quite confusing, I wasn't sure how to word it better. What I am trying to do is to fetch some items, map through those items to display them, but the problem is that one of those items has a value of what needs to be another api call to access it.

This is what I'm trying to do:

First of all I am storing an empty state, which later on becomes the data of the fetched items:

const [data, setData] = useState([]);

I'm using axios to fetch and store the data:

const fetchItems = () => {
  axios("https://swapi.dev/api/people")
    .then((response) => {
      console.log(response.data.results);

      const newData = response.data.results.map((item) => ({
        name: item.name,

        homeworld: () => {
          axios.get(item.homeworld).then((response) => {
            response.data.results;
          });
        },
      }));
      setData(newData);
    })

    .catch((error) => {
      console.log("error", error);
    });
};

It works with the name because it's a simple value. However, the homeworld includes a link that needs to be called once again in order to access it, instead of being a simple value like the name in this case. How can I call it and access what values are held within that link, and display them instead of just displaying the url?

Answer 1

I hope this can help you:

const [data,setData] = useState([])
const fetchItems = () => {
  axios("https://swapi.dev/api/people")
    .then(response => {
      console.log(response.data.results);

      const { results } = response.data;

      for (const item of results) {
         axios.get(item.homeworld).then(({data}) => {
          setData([...data,{ name: item.name, homeworld: data.results }]);
        });
      }
    })
    .catch(error => {
      console.log("error", error);
    });
};

or with fetch :

const [data,setData] = useState([])
fetch("https://swapi.dev/api/people").then(re=>re.json())
    .then(response => {
      const newData = []
      const { results } = response;
      const newData = [];
      for (const item of results) {
         fetch(item.homeworld).then(re => re.json()).then((data) => {
             newData.push({ name: item.name, homeworld: data });
         });
      }
      console.log(newData)
      setData(newData)
    })
    .catch(error => {
      console.log("error", error);
    });

Answer 2

Use Promise.all()

You can use Promise.all() method to get all the information you need by creating an array of promises by mapping the response.results array with an async function .

This is the code example

const fetchItems = async () => {
  const req = await axios.get("https://swapi.dev/api/people");
  const response = await req.data;

  const allDataPromises = response.results.map(async (item) => {
    const itemReq = await axios.get(item.homeworld);
    const itemResponse = await itemReq.data;
    return {
      name: item.name,
      homeworld: itemResponse,
    };
  });

  const allData = await Promise.all(allDataPromises);
};

For further information about Promise.all()