Выполнение нескольких запросов API одновременно с использованием fetch в vue - PullRequest
Новая
       25

Выполнение нескольких запросов API одновременно с использованием fetch в vue

1 голос
/ 27 апреля 2020

Я хотел бы сделать два вызова API одновременно для ReST API в моем vue компоненте. Я провел исследование в Интернете и использую эту логику c: 

// Multiple fetches
      Promise.all([
        fetch(
          `https://api.covid19api.com/live/country/${this.selected}/status/confirmed/date/${this.yesterday}`
        ),
        fetch(
          `https://api.covid19api.com/live/country/south-africa/status/confirmed/date/2020-03-21T13:13:30Z`
        )
      ])
        .then(responses => {
          // Get a JSON object from each of the responses
          return responses.map(response => {
            return response.json();
          });
        })
        .then(data => {
          // Log the data to the console
          // You would do something with both sets of data here

          this.coronaVirusStats1 = data[0];
          console.log(this.coronaVirusStats1);
        })
        .catch(function(error) {
          // if there's an error, log it
          console.log(error);
        });
    }

Консольное значение - это обещание, которое я понимаю, но когда я смотрю в Vue devTools под моим компонентом, я вижу, что coronaVirusStats1 имеет значение «Обещание», а не массив объектов, которые я ожидаю обратно. Когда я делаю один выбор и использую переменную данных, проблем не возникает. Однако я озадачен тем, как получить доступ к возвращенным данным из вызовов выборки к нескольким конечным точкам. Я попробовал все решения здесь извлечения API , но ни одно не помогло. Если кто-то может объяснить правильный способ доступа к данным из выборок, я был бы очень признателен.

1 Ответ

1 голос
/ 27 апреля 2020

Ты просто там. Проблема в том, что ваш первый then возвращает массив обещаний . К сожалению, цепочки обещаний работают только с экземпляром Promise, поэтому здесь нет ничего, что могло бы дождаться разрешения ваших обещаний.

Быстрое решение состоит в том, чтобы изменить первое then на 

return Promise.all(responses.map(r => r.json()))

При этом, API fetch немного больше, особенно для обработки ошибок.

Я бы использовал что-то вроде следующего для каждого вызова fetch, чтобы убедиться, что сетевые ошибки и неуспешные HTTP-запросы обрабатываются правильно.

Это также будет обрабатывать развертывание ответа JSON, поэтому вам не нужно будет использовать приведенный выше 

Promise.all([
  fetch(url1).then(res => res.ok && res.json() || Promise.reject(res)),
  fetch(url2).then(res => res.ok && res.json() || Promise.reject(res))
]).then(data => {
  // handle data array here
})

См. https://developer.mozilla.org/en-US/docs/Web/API/Response/ok

...