Как получить доступ к значениям внутри разрешенных обещаний?

Question

У меня проблемы с доступом к значениям getPeople(0,4).

function getPeople(start, end) {
    const peopleArray = [];
    for (let i = start; i <= end; i++) {
      peopleArray.push(
        axios.get(`https://www.testsite.net/api/test/workers/${i}`)
      );
    }
    return peopleArray;
  }

  useEffect(() => {
    Promise.all([getData(), getPeople(0, 4)]).then(item => {
      //console.log(item[0].data.orders); //
      setData(item);
      setPersonData(item);
    });
  }, []);

item[0] работает нормально. Вот результат, который я получаю, когда я console.log(item[1]) Как я могу получить доступ к данным?

item[1] - это массив обещаний.

Answer 1

Вам просто нужно распространить массив, возвращенный из getPeople(), примерно так:

Promise.all([getData(), ...getPeople(0, 4)]).then(item => {
    console.log(item);
});

Promise.all() ожидает массив Promise, вы передавали массив, содержащий другой массив.

Answer 2

Это можно сделать более читабельным с помощью функции asyn c в использованииEffect

//make sure this actually returns the people rather than a load of promises
async function getPeople(start, end) {

    const peopleArray = [];        
    for (let i = start; i <= end; i++) {
      let person = await axios.get(`https://www.hatchways.io/api/assessment/workers/${i}`);
      peopleArray.push(person);
    }
    return peopleArray;

}

//then in useEffect you need to create another async function
useEffect(() => {
    async function getDataAndPersons() {

      const data = await getData();
      setData(data);
      const people = await getPeople(0, 4);
      people.forEach(person => setPersonData(person));

    };
    getDataAndPersons();
}, []);

Answer 3

Функция getPeople возвращает массив обещаний.

Если вы хотите ожидать этих обещаний при вызове Promise.all, один из вариантов:

  useEffect(() => {
    Promise.all([getData(), ...getPeople(0, 4)]).then(item => {
      //console.log(item[0].data.orders);  
      console.log(item[1]); // this will effectively output the people 0 object
      setData(item);
      setPersonData(item);
    });
  }, []);

Выше будет получено item[0] разрешенное значение из обещания getData (которое уже звучит ожидаемым). Тогда с item[1] по item[5] будут те 5 человек, которых вы, похоже, ожидаете.