Как сделать связный запрос через fetch и связать заказы с пользователями?

Question

[TheRevan]

Есть такой код

componentDidMount = () =>{
    let token = 'Bearer ' +localStorage.getItem('token');
    console.log(token);
    fetch('*****************', { method: 'GET',headers:{'Accept': "application/json", "Authorization": token}})
        .then(response => response.json())
        .then((response) => {
          let orderArr = response.success.orders;
          orderArr.forEach(order => {
            ///return fetch('**************'+order.user_id, { method: 'GET',headers:{'Accept': "application/json", "Authorization": token}})
          });
          
        })
        .then((response) => console.log(response))
        .catch(error => console.log(error));
  }

response.json()) - возвращает данные такого формата:
Как мне добавить в заказ имя пользователя из другого запроса?

Answer 1

[Антон Спирин]

Если отображаете в списках имя пользователя, то лучшим вариантом будет, на сервере добавлять к каждому заказу пользователя в поле linked. Так вы получите все необходимые данные за один запрос.
Либо, что-то вроде:

componentDidMount() {
  this.fetchData();
}

async fetchData() {    
  try {
    const orders = await fetch('orders-path', options).then(response => response.json()); 

    const users = {};
    for (let i = 0; i <= orders.length; i++) {
      const id = orders[i].user_id;
      const user = await fetch('/user/' + id, options).then(response => response.json());
      users[id] = user;
    } 

    this.setState({ orders, users });
  } catch (e) {
    // handle error
  }
}

Answer 2

[Ihor Bratukh]

async/await, promise, promise.all
Пример на codepen.io
В этом примере сначала идет запрос на один endpoint, в ответе получаем данные и ссылки на которые нужно кидать следующие запросы.