Реагировать - получить несколько apis - PullRequest
Новая
       9

Реагировать - получить несколько apis

0 голосов
/ 03 сентября 2018

Я хочу сделать запрос на получение нескольких apis одновременно из двух разных URL-адресов, а затем хочу просто обновить массив «items» в состоянии новым свойством «img», чтобы не перезаписывать его. Я хочу сохранить и свойства в первом запросе. Вот моя попытка. 

   componentDidMount(){

      let url = ``;
      let url2 = ``

        fetch(url,{
          method: 'GET'
        })
        .then((response)=> response.json())
        .then((responseJson) => {
          const newItems = responseJson.items.map(i => {
            return{
              itemId: i.itemId,
              name: i.name,
            };
          })
          const newState = Object.assign({}, this.state, {
            items: newItems
          });

          console.log(newState);
          this.setState(newState);
        })
        .catch((error) => {
          console.log(error)
        });
        fetch(url2,{
          method: 'GET'
        })
        .then((response)=> response.json())
        .then((responseJson) => {
          const newImg = responseJson.item.map( data=> {
            return{
              img: data.picture.url
            };
          })
          const newState = Object.assign({}, this.state, {
            items: newImg
          });

          console.log(newState);
          this.setState(newState);
        })
        .catch((error) => {
          console.log(error)
        });
    }

Ответы [ 3 ]

0 голосов
/ 03 сентября 2018

Использовать Promise.all (): 

var p1 = Promise.resolve(3);
var p2 = 1337;
var p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, "foo");
}); 

Promise.all([p1, p2, p3]).then(values => { 
  console.log(values); // [3, 1337, "foo"] 
});

Ссылка: https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

0 голосов
/ 03 сентября 2018

Вы абсолютно можете вызвать два отдельных API. Проблема, с которой вы столкнулись, заключается в том, что последний вызов API-интерфейса перезаписывает данные, которые были сохранены из первого вызова API. Вот код, который это исправит. 

componentDidMount(){

  let api1 = `https://myapiexample1.com`;
  let api2 = `https://myapiexample2.com`;

  let promise1 = fetch(api1)
  .then(response => response.json())
  .then(json => json.items.map(item => {
    return {
      itemId: item.itemId
      name: item.name
    }
  }))

  let promise2 = fetch(api2)
  .then(response => response.json())
  .then(json => json.items.map(item => {
    return {
      img: item.img
    }
  }))

  Promise.all([promise1, promise2])
  .then(results => results[0].concat(results[1]))
  .then(items => this.setState({itmes}))
}

Альтернативный подход, который не так чист, но похож на то, что вы в настоящее время делаете, - это обязательно включайте старое состояние при добавлении новых элементов в состояние: 

this.setState({
  items: newItems.concat(this.state.items)
})
0 голосов
/ 03 сентября 2018

Вы можете использовать Promise.all, он разрешится, когда все обещания будут в порядке, или отклонит их в случае сбоя.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

...